'router.query' as it undefine

[scenic dust]

i already "imported the next/navigation"

Im using here "const { userId } = router.query;" dont know how to solve it here is full code
her is what im trying do " const [userData, setUserData] = useState(null);
const router = useRouter();
const { userId } = router.query;

useEffect(() => {
  const fetchData = async () => {
    try {
      if (userId) {
        const user = users.find((user) => user.id === userId);

        if (user) {
          const enterpriseChallenges = await fetchUserSubcollection(
            userId,
            "Enterprise_Challenges"
          );
          const landscapeChallenges = await fetchUserSubcollection(
            userId,
            "Landscape_Challenges"
          );

          setUserData({
            ...user,
            enterpriseChallenges,
            landscapeChallenges
          });
        }
      }
    } catch (error) {
      console.error("Error fetching user data:", error);
    }
  };

  fetchData();
}, [userId, users]);

if (!userData) {
  return <div>Loading...</div>;
}

const { id, name, email, phone, enterpriseChallenges, landscapeChallenges } =
  userData;"

[buoyant tangle]

Hi @scenic dust. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

[scenic dust]

im facing this issue

[buoyant tangle]

---

Based on the provided code, it seems like you are trying to fetch user data and their subcollections (Enterprise_Challenges and Landscape_Challenges) when the userId is available in the router query. Here's a brief explanation of your code:

1. You are using the useRouter hook from Next.js to access the router and get the userId from the query.
2. You are using the useEffect hook to fetch data when the userId or users change.
3. Inside the useEffect, you are fetching user data and their subcollections, then updating the userData state with the fetched data.

However, I don't see any issues with the code you provided, and it seems unrelated to Next.js navigation. If you are facing any specific issues or errors, please provide more information about the problem.

For reference, you can review the following extracts related to data fetching and useRouter:

• useRouter (https://nextjs.org/docs/pages/api-reference/functions/use-router)
• Data Fetching (https://nextjs.org/docs/app/building-your-application/data-fetching)
• Fetching data on the client side (https://nextjs.org/docs/pages/building-your-application/data-fetching/get-server-side-props#fetching-data-on-the-client-side)

---

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@scenic dust kapa.ai is still learning and improving, please let us how it did by reacting below