Firebase Authentication Retrieve displayName Null

Question

Why displayName is not null in authUser but retrieve null? However, after refreshing the page, then it will show the displayName that I have updated.

useEffect(()=>{
    const unsubscribe = auth.onAuthStateChanged((authUser)=>{
      if(authUser){
        //user has logged in
        setUser(authUser);
        console.log(authUser);
        console.log(authUser?.displayName);
        db
          .collection("users")
          .doc(authUser.uid)
          .get()
          .then((doc)=>{
            if(doc.exists){
              db
                .collection("users")
                .doc(authUser.uid)
                .get()
                .then((doc)=>{
                  setProfilePicture(doc.data().imageUrl);
                })
          }
          });
      }else{
        //user has logged out
        setUser(null);
      }
    })
    return ()=>{
      //perform some cleanup actions
      unsubscribe();
    }
  },[user, username]);

Answer 1

why you are using authUser?.displayName although you have checked already if the authUser object is null or not . may be you can try removing it . Or can you please provide the whole authUser object instead of screenshot.