ReactJS中firebase.auth().currentUser返回属性为undefined的问题排查

根因说明 #

你遇到的问题由两个原因叠加导致：

• 调用createUserWithEmailAndPassword创建用户时，不仅需要保证邮箱、密码参数完整，还需要主动调用更新接口设置displayName，否则该字段默认值为undefined
• 现有代码混用useAuthState返回的响应式user对象和auth.currentUser，存在状态不同步的潜在风险

第一步：修复用户注册逻辑 #

注册成功后主动调用updateProfile接口设置用户的昵称信息，同时增加参数校验避免传参缺失：

import { createUserWithEmailAndPassword, updateProfile } from "firebase/auth";

const register = async (email, password, nickName) => {
  // 前置参数校验，避免无效传参
  if (!email.trim() || !password.trim() || !nickName.trim()) return;
  try {
    const userCred = await createUserWithEmailAndPassword(auth, email, password);
    // 立即更新用户昵称
    await updateProfile(userCred.user, {
      displayName: nickName
    });
  } catch (err) {
    console.error("注册失败：", err);
  }
}

第二步：优化提交帖子的代码 #

直接使用useAuthState返回的user对象，不要重复读取auth.currentUser，同时增加兜底逻辑避免字段为空：

const [user] = useAuthState(auth);

async function submitPostHandler() {
    if (user) {
        await firestore.collection("posts").add({
            title: title,
            desc: desc,
            imgUrl: imgUrl,
            // 增加兜底，极端情况为空时显示默认值，也可以替换为user.email.split('@')[0]使用邮箱前缀
            poster: user.displayName || "匿名用户",
            createdAt: new Date().toISOString(),
            comments: []
        });
        navigate("/all-posts");
    } else {
        navigate("/login");
    }
}

存量用户兼容方案 #

对于已经注册完成、displayName为空的存量用户，可以新增个人资料编辑页，引导用户补全昵称信息。

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