Android模拟器无法获取Query Params问题求助

核心错误：变量名拼写错误 #

你在useEffect里定义了const params = new URLSearchParams(window.location.search);，但后续调用的是searchParams.get()——这里的searchParams是未定义的变量，导致transId和idGet始终为null，组件直接返回null，自然没有内容显示。

快速修复 #

把代码里的searchParams.get改成params.get，对应你定义的变量名即可：

useEffect(() => {
  const params = new URLSearchParams(window.location.search);

  setTransId(params.get("trans_id"));
  setIdGet(params.get("id_get"));
}, []);

适配Next.js的优化方案 #

在Next.js Pages目录开发时，更推荐用官方提供的useRouter钩子获取URL参数，既能避免直接依赖window对象的潜在问题，也更符合框架路由机制：

import { useRouter } from 'next/router';
import { useState, useEffect } from 'react';

export default function TuitionPayment() {
  const router = useRouter();
  const [transId, setTransId] = useState(null);
  const [idGet, setIdGet] = useState(null);

  useEffect(() => {
    if (router.query.trans_id && router.query.id_get) {
      setTransId(router.query.trans_id);
      setIdGet(router.query.id_get);
    }
  }, [router.query]);

  if (!transId || !idGet) {
    return null;
  }

  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>
    </>
  );
}

额外排查建议 #

• 可以在useEffect里加一行console.log('当前参数:', params)，验证Android模拟器中打开的链接是否真的携带了正确的参数；
• 清除浏览器缓存后重新测试，避免旧代码残留导致问题。

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