Next.js中直接访问页面时URL查询参数id获取为undefined的问题

直接访问/tickets/[id]这类动态路由页面时，router.query.id返回undefined，本质是Next.js客户端首次渲染时，路由参数还未完全加载完成，组件代码会提前执行；但通过Link跳转属于客户端导航，路由状态同步更新，所以能正常获取参数。下面是几种可行的解决方法：

方法1：用useEffect监听query参数变化 #

通过useEffect监听id的变化，确保参数存在后再执行相关逻辑：

import { useRouter } from 'next/router'
import { useEffect } from 'react'

export default function TicketEdit() {
  const router = useRouter()
  const { id } = router.query

  useEffect(() => {
    // 只有id存在时才执行后续操作
    if (id) {
      console.log(id)
      // 这里可以写请求数据、初始化页面等逻辑
    }
  }, [id]) // 依赖id，参数变化时触发

  return <div>客户编辑页内容</div>
}

方法2：使用getServerSideProps（服务端渲染） #

如果页面需要从服务端获取数据，直接通过getServerSideProps拿到路由参数，再传递给组件，无论直接访问还是跳转都能正常获取：

// [id].js
export async function getServerSideProps(context) {
  // Next.js 13+ Pages Router用context.params.id，旧版本用context.query.id
  const { id } = context.params || context.query
  
  // 示例：用id请求接口数据
  // const response = await fetch(`https://your-api.com/tickets/${id}`)
  // const ticketData = await response.json()

  return {
    props: { id } // 将id作为props传给组件
  }
}

export default function TicketEdit({ id }) {
  console.log(id) // 直接访问也能拿到有效值
  return <div>客户编辑页内容</div>
}

方法3：利用router.isReady状态判断 #

useRouter提供了isReady属性，用来标识路由是否已加载完成，可在参数准备好后再渲染页面内容：

import { useRouter } from 'next/router'

export default function TicketEdit() {
  const router = useRouter()

  // 路由未准备好时显示加载状态
  if (!router.isReady) {
    return <div>加载中...</div>
  }

  const { id } = router.query
  console.log(id)

  return <div>客户编辑页内容</div>
}

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