Hi all, I want to fetch the docId from the URL on the client side and pass it to my cloud firestore function to query for a specific profile. Then, on the page this specific profile should be displayed. however, I am having trouble making react.query work to get the URL from the client side.

 const router = useRouter();

  useEffect(() => {
    // This function is now part of the useEffect but not used for condition checking
    const { docId } = router.query.docId; // Make sure this is correctly destructured
    
    const fetchData = async (docId) => {
      try {
        const userProfileData = await GetProfileByDocID(docId);
        if (userProfileData) {
          setUserProfile(userProfileData);
          console.log("User Profile is: ", userProfileData);
        } else {
          console.log("User profile not found");
        }
      } catch (error) {
        console.log("Error fetching profile", error);
      } finally {
        setLoading(false);
      }
    };

    if (router.isReady) {
      fetchData(docId); // Pass docId as an argument to fetchData
    }
  }, [router.isReady, router.query]);