Next.js 13执行npm run build后无法获取URL查询参数求助

你遇到的核心问题是用错了路由钩子：你的项目基于Pages目录的Pages Router架构，但代码里导入的useSearchParams是App Router（app目录）专属的钩子，在Pages Router环境下根本无法正常工作。

正确修改步骤 #

1. 替换路由钩子：把next/navigation的useSearchParams换成next/router的useRouter
2. 从router的query对象中提取查询参数
3. 保留必要的客户端标识和动态渲染配置（避免构建预渲染丢失参数）

修改后的代码：

'use client'
import { Box, Typography } from "@mui/material";
import Link from "next/link";
import { useRouter } from "next/router"; // 替换为Pages Router专属的useRouter

// 强制页面动态渲染，防止构建时预渲染导致参数丢失
export const dynamic = 'force-dynamic';

export default function TuitionPayment() {
  const router = useRouter();
  // 从router.query中获取URL参数
  const transId = router.query.trans_id;
  const idGet = router.query.id_get;

  return (
    <>
        <Link
          href={`gymtracker://tuition/${transId}/${idGet}`}
          style={{ textDecoration: "none" }}
        >
          <Box
            sx={{
              width: "100%",
              backgroundColor: "#66A182",
              py: 1,
              px: 2,
              color: "#fff",
              borderRadius: 1,
            }}
          >
            <Typography variant="subtitle1">Return to Application</Typography>
          </Box>
        </Link>
    </>
  );
}

额外排查方向 #

• 确认部署后的URL确实携带目标参数，格式类似：https://你的域名/tuition-payment?trans_id=xxx&id_get=yyy
• 如果需要在服务端提前获取参数，也可以用getServerSideProps传递参数，避免客户端渲染的延迟：

export async function getServerSideProps(context) {
  const { trans_id, id_get } = context.query;
  return {
    props: { transId: trans_id, idGet: id_get },
  };
}

// 组件直接接收props使用
export default function TuitionPayment({ transId, idGet }) {
  // 后续代码不变
}

内容的提问来源于stack exchange，提问作者Ali Bahaari