Firebase v9配合TypeScript实现用户注册时调用UpdateUserProfile更新资料的方法

核心问题原因 #

• 刚调用完createUserWithEmailAndPassword注册成功的瞬间，Firebase Auth全局实例的currentUser还未完成状态同步，仍然为null，所以你的判断分支无法进入
• 类型报错的本质是this.auth.currentUser的原生类型定义就是User | null，只要你依赖这个全局属性，就必须处理null的情况

最优解决方法 #

不需要依赖全局currentUser，直接使用注册接口返回的userCredential中自带的User对象即可，这个对象是注册成功后必然存在的，不存在null问题，也不会有类型报错。

修改后可运行的完整代码如下：

import { createUserWithEmailAndPassword, getAuth, sendPasswordResetEmail, updateProfile, User } from 'firebase/auth';
import md5 from 'md5'; // 注意补全md5依赖的导入

async signUp(email: string, password: string, name: string) {
  try {
    const userCredential = await createUserWithEmailAndPassword(this.auth, email, password);
    // 直接拿注册返回的user对象传参，类型为确定的User，不存在null问题
    await this.updateUserProfile(userCredential.user, name);
  } catch (error) {
    const errorCode = (error as {code: string}).code;
    const errorMessage = (error as {message: string}).message;
    console.log(errorCode, errorMessage);
  }
}

// 方法直接接收User类型参数，无需再读取全局currentUser
async updateUserProfile(user: User, name: string) {
  try {
    await updateProfile(user, {
      displayName: name, 
      // 补充gravatar路径的斜杠，同时处理user.email可能为null的边界情况
      photoURL: `https://gravatar.com/avatar/${md5(user.email || '')}?d=identicon`
    });
    console.log('Profile updated!');
  } catch (error) {
    console.log('更新资料出错', error);
  }
}

其他说明 #

• 如果你确实需要走监听onAuthStateChanged的方案也是可行的，适合注册逻辑和更新资料逻辑分散在不同组件的场景，只需要把注册时拿到的用户名存在全局状态（比如你提到的Redux），监听到用户登录状态后取出来调用更新接口即可
• 上述方案和你在v8中直接在注册回调里调用更新的逻辑完全一致，v9只是把原来挂载在user实例上的方法改成了独立函数、传入user参数的形式，核心逻辑没有变化

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