使用Angular Native结合Firebase更新用户资料后页面未刷新如何解决

问题核心原因 #

• 你当前的firebase.reloadUser()是和firebase.updateProfile()并行触发的，属于异步逻辑顺序错误：reloadUser执行的时候，updateProfile和Firestore的更新操作还没执行完成，自然拿不到最新的用户数据。
• 你只同步了Auth的用户profile，没有同步监听Firestore里的用户扩展字段（contactNumber等），页面没有绑定最新的数据流自然不会刷新。
• Angular Native的变更检测没有被触发，异步回调里的数据更新可能没有同步到视图层。

修复后的代码实现 #

调整异步逻辑的执行顺序，把重载、赋值操作放到所有更新操作完成之后：

async editProfile(displayName: string, contactNumber: string, uid: string) {
  try {
    // 第一步：更新Auth用户profile
    await firebase.updateProfile({ displayName });
    // 第二步：更新Firestore用户扩展数据
    await firestore
      .collection("users")
      .doc(uid)
      .set(
        { displayName, contactNumber },
        { merge: true }
      );
    // 第三步：所有数据更新完成后再重载用户信息
    await firebase.reloadUser();
    const latestUser = await firebase.getCurrentUser();
    // 主动触发Angular变更检测，同步数据到视图
    this.ngZone.run(() => {
      // 把最新的Auth用户数据赋值给组件绑定的变量
      this.currentUser = latestUser;
      // 同步更新Firestore侧的用户扩展数据
      this.userInfo = { displayName, contactNumber };
    });
  } catch (error) {
    console.log("更新失败：", error);
  }
}

组件自动重载展示最新数据的实现方案 #

• 组件初始化时订阅Firebase Auth的用户状态流，只要用户信息变更就自动更新组件数据：

  ngOnInit() {
    firebase.authState.subscribe(async user => {
      if (user) {
        this.ngZone.run(() => {
          this.currentUser = user;
        })
        // 同步拉取Firestore里的用户扩展信息
        const userDoc = await firestore.collection("users").doc(user.uid).get();
        this.ngZone.run(() => {
          this.userInfo = userDoc.data();
        })
      }
    });
  }
  

• 如果使用AngularFire封装库，可以直接订阅AngularFireAuth.user和AngularFirestore.doc.valueChanges()的可观察对象，配合async管道在模板中自动订阅更新，不需要手动处理变更检测。
• 所有异步回调中的变量赋值操作，都用NgZone.run()包裹，主动触发Angular的变更检测，强制视图刷新。

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