React Native Expo+Firebase注册报undefined错误 无法更新displayName存数据至Firestore

问题根因 #

• Promise链的第一个then块没有返回userCredentials对象，导致第二个then接收的入参为undefined，触发undefined is not an object (evaluating 'userCredentails.user')报错
• user.updateProfile()是异步方法，未等待执行完成就进入后续逻辑，会导致displayName更新不生效
• 缺少Firestore写入用户数据的相关逻辑，注意禁止存储明文密码，敏感信息会有泄露风险，Firebase Auth已完成密码加密存储，无需额外处理

修正代码 #

改用async/await写法，逻辑更清晰，避免Promise链嵌套混乱：

import firebase from "firebase";
import { auth, db } from "../../firebase"; // 需在firebase配置文件中导出Firestore实例db
import { useState } from "react";

const SignUpScreen = () => {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const handleSignUp = async () => {
    try {
      // 1. 完成用户注册
      const userCredentials = await auth.createUserWithEmailAndPassword(email, password);
      const user = userCredentials.user;

      // 2. 等待displayName更新完成
      await user.updateProfile({
        displayName: name
      });

      // 3. 写入非敏感用户数据到Firestore
      await db.collection("users").doc(user.uid).set({
        uid: user.uid,
        displayName: name,
        email: email,
        createdAt: firebase.firestore.FieldValue.serverTimestamp()
      });

      // 此处可添加注册成功后的跳转等逻辑
      console.log("注册成功：", user.email, user.displayName);
    } catch (error) {
      alert(error.message);
    }
  };
  // 原有页面渲染逻辑保留即可
}

如果要保留原有Promise链写法，调整如下：

const handleSignUp = () => {
  auth
    .createUserWithEmailAndPassword(email, password)
    .then((userCredentials) => {
      const user = userCredentials.user;
      // 同时返回异步更新任务和用户凭证给下一个then
      return Promise.all([
        user.updateProfile({ displayName: name }),
        Promise.resolve(userCredentials)
      ])
    })
    .then(([_, userCredentials]) => {
      const user = userCredentials.user;
      // 写入Firestore逻辑
      return db.collection("users").doc(user.uid).set({
        uid: user.uid,
        displayName: name,
        email: email,
        createdAt: firebase.firestore.FieldValue.serverTimestamp()
      })
    })
    .catch((error) => alert(error.message));
};

注意事项 #

• 确认firebase配置文件中已正确初始化Firestore并导出实例：export const db = firebase.firestore()
• 确认Firestore权限规则已放开对应写入权限，测试阶段可临时配置为认证用户可写，上线前需收紧权限

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