Cannot read properties of undefined only on refresh

While setting up a profile using firebase and react, I am getting the error of Cannot read properties of undefined: (reading 'name')
However, the strange part is that this doesn't happen when I save my changes but when I refresh the page. I am curious, why is this happening?

Here is before refresh(when my work is saved):

Here is after I refresh the localhost:

Here is my current code:

  useEffect(() => {
    onAuthStateChanged(auth, async (user) => {
      if (user) {
        const snapshot = await getDoc(doc(db, "users", user.uid))
        console.log(snapshot.data().name)
        const userData= snapshot.data();
        
        setProfile(userData);

      } 
    });
  }, []);



  return (
    <>
      
      <Card>
        <Card.Body>
          <h2 className="text-center mb-4"> Profile</h2>
          <p className="details">
          {JSON.stringify(profile.name)}
          </p>
          {error && <Alert variant="danger">{error}</Alert>}
        </Card.Body>
      </Card>
      <div className="w-100 text-center mt-2">
        <Button variant="link" onClick={handleLogout}>
          {" "}
          Log out{" "}
        </Button>
      </div>
    </>
  );
};

For now, I'll continue to just use JSON.stringify(profile) as that works fine but just was curious on this issue.

Cannot read properties of undefined: (reading 'name')

This error means, no property available with name. This problem you facing bcoz DOM is render first time without the api data then useEffect called.

To resolve the problem you can use

1. Optional Chaining :- Like this profile?.name

2. Use conditional rendering:-

     {profile?.name && (<p className="details">
     {JSON.stringify(profile.name)}
     </p>)}
   

Always use these for this type of error.