router.query returning undefined in nextjs

On the initial loading of the Edit page, the query is returning as ‘undefined’ instead of the expected result. I am using client-side fetching and not using SSG or SSR. The ‘Edit’ page is located in the ‘/src/pages/solution/[id]/edit’ directory.

Anyone, please tell me how I can fetch data using useDocument hook?

I tried to use isReady like this, but it’s just showing a blank screen:

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

My 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

Anyone, please help me with this!

>Solution :

isReady is part of the router object, not of router.query

Try router.isReady to validate if the router is already loaded.