NextJS初始化获取URL参数返回空，如何解决？

你遇到的是Next.js Pages Router的固有特性：路由实例在客户端首次hydration阶段尚未完成初始化，query字段还未解析浏览器URL中的参数，只有路由完全加载后才会填充对应值。如果你的页面是SSG/ISR静态生成的，服务端生成页面时无法获取用户端的URL参数，也会导致首次渲染拿到空对象。

下面是三种常用的解决方式，可根据你的业务场景选择：

• 方式1：监听路由就绪状态（通用推荐）
  利用路由实例自带的isReady字段判断路由是否完成初始化，只有就绪后再执行参数获取逻辑：

  const rout = useRouter()
  
  useEffect(() => {
    // 路由未就绪时直接跳过
    if (!rout.isReady) return
    console.log('queries:', rout.query)
    // 你的业务逻辑
  }, [rout.isReady, rout.query])
  

• 方式2：监听指定参数，参数存在后再执行逻辑
  如果你只需要获取某几个特定参数，可以直接判断参数是否存在，避免额外判断路由状态：

  const rout = useRouter()
  
  useEffect(() => {
    const { myparam } = rout.query
    // 目标参数不存在时直接跳过
    if (!myparam) return
    console.log('拿到目标参数：', myparam)
    // 你的业务逻辑
  }, [rout.query])
  

• 方式3：服务端提前获取参数（SSR场景适用）
  如果你的页面用的是SSR渲染模式，可以直接在getServerSideProps中拿到参数传递给组件，组件首次渲染就能拿到参数，不会出现空值：

  // 页面层级的getServerSideProps
  export async function getServerSideProps(context) {
    const { myparam } = context.query
    return {
      props: {
        myparam
      }
    }
  }
  
  // 组件内直接从props取参数
  function Page({ myparam }) {
    console.log('首次渲染直接拿到参数：', myparam)
    // 其他业务逻辑
  }
  

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