NextJS 14.0.3中useSearchParams获取URL参数返回Null问题咨询

问题场景 #

在NextJS 14.0.3 + React 18.2.0环境下，访问http://localhost:3000/mypage?a=apple&b=banana时，mypage.tsx里使用useSearchParams钩子获取参数返回null。

相关代码 #

'use client'

import { useSearchParams } from "next/navigation";

export default function MyPage() {
  const searchParams = useSearchParams();
  const a = searchParams.get('a');
  const b = searchParams.get('b');
  console.log("a: ", a);
  console.log("b: ", b);

  return (
    <div></div>
  )
}

控制台输出 #

a:  null
b:  null

解决办法 #

• 匹配正确的路由模式
  useSearchParams是NextJS App Router的专属API，如果你的页面放在Pages Router（pages/目录下），需要换成useRouter的query对象来获取参数：

  import { useRouter } from 'next/router';
  
  export default function MyPage() {
    const router = useRouter();
    const { a, b } = router.query;
    console.log("a: ", a);
    console.log("b: ", b);
  
    return <div></div>;
  }
  

• 延迟读取参数（客户端hydration完成后）
  即使标记了'use client'，服务端渲染阶段仍无法获取URL参数，会导致初始值为null。可以用useEffect包裹参数读取逻辑，确保在客户端渲染完成后再获取：

  'use client'
  
  import { useSearchParams } from "next/navigation";
  import { useEffect } from 'react';
  
  export default function MyPage() {
    const searchParams = useSearchParams();
  
    useEffect(() => {
      const a = searchParams.get('a');
      const b = searchParams.get('b');
      console.log("a: ", a);
      console.log("b: ", b);
    }, [searchParams]);
  
    return <div></div>;
  }
  

• 检查URL与路由配置

  1. 确认浏览器地址栏的URL完全正确，参数无拼写错误
  2. 刷新页面验证参数是否被保留
  3. 检查next.config.js中的rewrites/redirects规则，确保没有意外移除URL参数

内容的提问来源于stack exchange，提问作者Paul Croarkin