在 React 中访问 firebase 文档之前等待 UserID

Question

After a user signs in to my program, they get redirected to a page where their profile data is fetched, however I need to wait on the page for the current user to not be null before reading the data from firebase.

Inside user page:

  const currentUser = useAuth();
  const routineBundleRef = doc(db, "RoutineBundle", currentUser.uid);

  useEffect(() => {
    const getRoutines = async () => {
      const data = await getDocs(collection(routineBundleRef, "Routines"));
      setRoutines(data.docs.map((doc) => ({...doc.data(), id: doc.id})));
    };
    getRoutines();
  }, []);

Inside auth page:

const useAuth = () => {
  const [currentUser, setCurrentUser] = useState();

  useEffect(() => {
    const unsub = onAuthStateChanged(auth, user => { setCurrentUser(user)});
    return unsub;
  }, [])

  return currentUser;
}

The page is being accessed with a userid, but I think the problem is that it does not load in time before trying to access user documents.

How would I go about waiting for usedid, before accessing documents?

Thanks for any help.

Answer 1

The user in onAuthStateChanged can be null . Try adding an if statement to check that:

useEffect(() => {
  const unsub = onAuthStateChanged(auth, user => {
      if (user) {
        setCurrentUser(user)
      });
  }
  return unsub;
}, [])