router.query在nextjs中返回未定义

在初始加载“编辑”页面时,查询返回的结果为“未定义”,而不是预期结果。我正在使用客户端获取,而不是使用SSG或SSR。“编辑”页面位于“/src/pages/solution/[id]/Edit”目录中。

任何人,请告诉我如何使用 useDocument 钩

我试着使用 isReady 就像这样,但它只是显示一个空白屏幕:

const SolutionEditForm = () => {
  const [formData, setFormData] = useState(INITIAL_STATE)
  const router = useRouter()
  const { id, isReady } = router.query

  if (!isReady) return null

  const { document } = useDocument("solutions", id)


  useEffect(() => {
    if (document) {
      setFormData(document)
    }
  }, [document])

  return (
    // JSX CODE
  )
}

我的代码:

const SolutionEditForm = () => {
  const [formData, setFormData] = useState(INITIAL_STATE)
  const router = useRouter()
  const { id } = router.query

  console.log(id) // return undefined

  const { document } = useDocument("solutions", id) // throws error because id is undefined


  useEffect(() => {
    if (document) {
      setFormData(document)
    }
  }, [document])

  return (
    // JSX CODE
  )
}

export default SolutionEditForm

任何人,请帮帮我!