Firebase createUserWithEmailAndPassword返回displayName为null问题求解

• 路由跳转时机错误：注册接口刚返回就跳转首页，此时用户资料更新、Firestore用户文档写入都还没执行完成，跳转后页面读取用户信息很容易拿到空的displayName，甚至出现用户文档不存在的报错，后续操作如果失败用户已经进入首页，不会触发错误提示。
• 异步逻辑等待缺失：混用async/await和嵌套.then写法，内部的updateProfile、Firestoreset操作都没有被正确等待，外层的await不会等这两个操作执行完就继续往下走，操作抛出的错误也可能无法被捕获。
• 空值风险：用可选链调用result.user?.updateProfile时，如果result.user为null，会返回undefined而非Promise，后续调用.then会直接抛出类型错误，没有做空值兜底。
• 字段取值逻辑错误：updateProfile执行完成后，当前持有的result.user对象不会自动刷新属性，此时读取result.user.displayName依然是null，写入Firestore的字段值为空，不符合预期。
• 错误捕获不全：嵌套的异步操作没有被正确绑定Promise链，Firestore写入失败、资料更新失败的错误可能无法进入统一的catch逻辑。

统一使用async/await平铺异步逻辑，理顺执行顺序：完成账号注册→更新用户资料→写入Firestore用户文档→所有操作全部成功后再跳转路由，所有异步操作都添加await等待执行结果，displayName直接使用传入的username参数赋值，避免读取旧用户对象拿到空值，同时添加用户空值校验。

修正后的代码如下：

async signUp(email: string, password: string, username: string, phoneNumber: string){
  try {
    // 第一步：执行邮箱密码注册
    const result = await this.afAuth.createUserWithEmailAndPassword(email, password);
    if (!result.user) throw new Error("注册失败，未获取到有效用户信息");

    // 第二步：等待用户资料更新完成
    await result.user.updateProfile({
      displayName: username
    });

    // 第三步：等待Firestore用户文档写入完成，直接用传入的username赋值displayName，避免空值
    await this.afs.collection("users").doc(result.user.uid).set({
      uid: result.user.uid,
      displayName: username,
      phoneNumber: phoneNumber,
      photoURL: result.user.photoURL,
      providerId: result.user.providerId,
    });

    // 所有流程成功后再跳转路由
    this.router.navigate(['/home']);
  } catch (error) {
    // 统一捕获所有环节的错误
    window.alert((error as Error).message);
  }
}

补充说明：如果需要从Auth实例读取最新的用户属性而非直接使用传入参数，可以在updateProfile执行完成后调用await result.user.reload()刷新本地用户实例，再从this.afAuth.currentUser上读取最新的displayName，当前场景直接使用传入的username是最稳妥的方案，不会出现空值问题。

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