最后我最终采用了这个解决方案，这里没有区别

<Link
                 href={{
                  pathname: "/dashboard/" + `${orderDetails.orderNo}`,
                  query: { id: `${orderID}` },
                }} as={`/dashboard/${orderDetails.orderNo}`}
              >
              </Link>

但是在第二页中添加这个以某种方式保持路由查询。

export async function getServerSideProps(context) {
  return {
    props: {}, // will be passed to the page component as props
  };
}

我不知道这是如何解决这个问题的，但它确实解决了这个问题。考虑到我只想要客户端渲染，我认为不会有太大的区别

看起来您对使用的查询参数有些混淆。
使用示例中的href URL对象，生成的完整href URL将是：

/dashboard/[order]?id=nnn

所以router.query将包含一个order键和一个id键，但没有orderdetail。
order键将被设置为具有给定as属性的orderDetails.orderNo的内容，但id将不会被设置，因为as没有?id=xxx部分。
假设你的JS文件名是/pages/dashboard/[order].js，你的${orderDetails.orderNo}可以作为this.props.router.query.order访问，并且id查询字符串永远不会被使用。
问题中的this.props.router.query.orderdetail永远不会被设置为任何值，因为请求没有这样的参数名。
如果文件名是/pages/dashboard/[orderdetail].js，则需要相应的

<Link href="/dashboard/[orderdetail]" as={`/dashboard/${orderDetails.orderNo}`}>...</Link>

我遇到了同样的问题，并通过使用纯JS访问查询字符串值来修复它。当使用getServerSideProps时，Next将为每个传入的请求在服务器端生成页面。为了避免这种服务器端延迟，添加useEffect()钩子来访问window对象并从那里检索查询字符串。

useEffect(() => {
    let queryString = window.location.search;
    let urlParams = new URLSearchParams(queryString);
    var studentId = urlParams.get("id");
}, []);

要访问不同的查询字符串值，只需更改urlParms.get("id")以使用您要查找的查询字符串变量的名称。我更喜欢这种解决方案，因为我希望在客户端保留此功能，并避免向服务器添加不必要的内容。这也很酷，因为您可以避免使用useRouter()钩子。