React-Redux项目登录注册页面Cannot read properties of undefined (reading 'updateProfile')错误修复求助

Problem Description #

I'm building a project with React-Redux and need to implement a login/registration page that saves user login info. I've been stuck on an error when trying to call userAuth.user.updateProfile during registration:

Cannot read properties of undefined (reading 'updateProfile')

Here's my Login component code:

function Login() { 
  const [email, setEmail]=useState(""); 
  const [password, setPassword]=useState(""); 
  const [name, setName]=useState(""); 
  const [profilePic, setProfilePic]=useState(""); 
  const dispatch= useDispatch(); 

  const logintoApp =(e) =>{ 
    e.preventDefault(); 
    auth.signInWithEmailAndPassword(email,password) 
    .then((userAuth)=>{ 
      dispatch(login({ 
        email:userAuth.user.email, 
        uid:userAuth.user.uid, 
        displayName:userAuth.user.displayName, 
        profileUrl:userAuth.user.photoURL, 
      })); 
    }).catch((error)=>alert(error)); 
  }; 

  const register =() =>{ 
    if(!name){ 
      return alert("Please enter a full name!") 
    } 
    auth.createUserWithEmailAndPassword(email,password) 
    .then((userAuth)=>{ 
      userAuth.user.updateProfile({ // <<==== Error occurs here ====>> 
        displayName:name, 
        photoURL:profilePic, 
      }) 
      .then(()=>{ 
        dispatch( 
          login({ 
            email:userAuth.user.email, 
            uid:userAuth.user.uid, 
            displayName:name, 
            photoUrl:profilePic, 
          }) 
        ); 
      }); 
    }) 
    .catch((error)=>alert(error.message)); 
  }; 

  return ( 
    <div className='login'> 
      <img src="https://www.nicepng.com/png/detail/381-3813396_linkedin-ads-are-great-for-b2b-marketing-linkedin.png" alt="" /> 
      <form> 
        <input value={name} onChange={(e)=>setName(e.target.value)} placeholder="Full name (required if registering)" type="text"/> 
        <input value={profilePic} onChange={(e)=>setProfilePic(e.target.value)} placeholder="Profile pic URL (optional)" type="text"/> 
        <input value={email} onChange={(e)=>setEmail(e.target.value)} placeholder="Email" type="email"/> 
        <input value={password} onChange={(e)=>setPassword(e.target.value)} placeholder="Password" type="password"/> 
        <button type='submit' onClick={logintoApp}>Sign In</button> 
      </form> 
      <p>Not a member? {' '} 
        <span className="login_register" onClick={register}>Register now</span> 
      </p> 
    </div> 
  ) 
} 
export default Login

Solution #

This error pops up because userAuth.user is returning undefined when you try to call updateProfile on it. Let's fix this with a few practical changes:

1. Add Null Checks for the User Object #

First, validate that the user object exists before trying to run methods on it. This guards against edge cases like network delays or unexpected Firebase Auth response structures:

const register =() =>{ 
  if(!name){ 
    return alert("Please enter a full name!") 
  } 
  auth.createUserWithEmailAndPassword(email,password) 
  .then((userAuth)=>{ 
    // Check if user object exists before proceeding
    if (!userAuth.user) {
      throw new Error("Failed to retrieve user after registration");
    }
    return userAuth.user.updateProfile({ 
      displayName:name, 
      photoURL:profilePic, 
    }) 
  })
  .then(()=>{ 
    dispatch( 
      login({ 
        email: userAuth.user.email, 
        uid: userAuth.user.uid, 
        displayName: name, 
        photoUrl: profilePic, 
      }) 
    ); 
  })
  .catch((error)=>alert(error.message)); 
}; 

2. Switch to Async/Await (Recommended for Readability) #

Async/await makes asynchronous code easier to read and debug, which helps catch issues like undefined values more clearly. Here's how to refactor the register function:

const register = async () =>{ 
  if(!name){ 
    return alert("Please enter a full name!") 
  }
  try {
    const userAuth = await auth.createUserWithEmailAndPassword(email,password);
    
    // Validate user object exists
    if (!userAuth.user) {
      throw new Error("User object not found after registration");
    }

    await userAuth.user.updateProfile({ 
      displayName:name, 
      photoURL:profilePic, 
    });

    dispatch( 
      login({ 
        email: userAuth.user.email, 
        uid: userAuth.user.uid, 
        displayName: name, 
        photoUrl: profilePic, 
      }) 
    );
  } catch (error) {
    alert(error.message);
  }
}; 

3. Verify Firebase Auth Initialization #

Double-check that you've correctly initialized Firebase Auth in your app. Make sure you have code like this in your root component or entry file:

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

const firebaseConfig = {
  // Your Firebase config details here
};

const app = initializeApp(firebaseConfig);
const auth = getAuth(app); // Ensure this is exported and imported correctly into your Login component

This guarantees the auth object you're using in the Login component is properly initialized and connected to Firebase.

内容的提问来源于stack exchange，提问作者Rashedul Islam