在 Firebase-v9 中使用 Typescript 注册用户时如何更新用户配置文件？

Posted 2023-03-13

【中文标题】在 Firebase-v9 中使用 Typescript 注册用户时如何更新用户配置文件？

【英文标题】：How can I UpdateUserProfile when signing up user, in Firebase-v9, with Typescript?

【发布时间】：2022-01-05 00:43:42

【问题描述】：

我正在尝试注册用户，然后updateUserProfile 使用如此命名的函数。

首先我遇到了 typeof 用户的问题，我通过从 firebase 导入 User 类型解决了这个问题，然后我检查是否存在 currentUser，以满足 null 的可能性。

我认为问题在于最后一次检查，因为函数的内容没有运行。即我认为用户尚未注册。

注意：如果我这样做：const user: User = this.auth.currentUser;

我进入updateProfile(user)这个错误type 'User | null' is not assignable to type 'User'.

如果我这样做：const user: User | null = this.auth.currentUser;

我收到此错误：

Argument of type 'User | null' is not assignable to parameter of type 'User'.

这就是为什么我最终会这样检查：

if (this.auth.currentUser) 
const user: User = this.auth.currentUser;

那么我怎样才能做到这一点呢？

一个选项可以是注册后在home 屏幕中检查onAuthStateChanged，然后运行updateUserProfile，我会在其中传递名称，我会在注册时将其保存在redux 中。

在 Firebase-v8 中，我可以在 updateUserProfile 中使用 createUserWithEmailAndPassword 函数。 我确信在 v9 中也应该有一种方法可以做到这一点，但 Typescript 也是如此。

任何帮助将不胜感激。

谢谢

import  createUserWithEmailAndPassword, getAuth, sendPasswordResetEmail, updateProfile, User  from 'firebase/auth';


  async signUp(email: string, password: string, name: string) 
    createUserWithEmailAndPassword(this.auth, email, password)
      .then(async userCredential => 
        console.log('userCredential', userCredential);

        await this.updateUserProfile(name);
      ).catch((error) => 
        const errorCode = error.code;
        const errorMessage = error.message;
      )
  

  async updateUserProfile(name: string) 

    if (this.auth.currentUser) 
      const user: User = this.auth.currentUser;

      updateProfile((user), 
        displayName: name, photoURL: `https://gravatar.com/avatar$md5(user.email)?d=identicon`
      ).then((user) => 
        // Profile updated!
        console.log('Profile updated!', user);

      ).catch((error) => 
        // An error occurred
        console.log(error);

      );
    
  

【参考方案1】：

如果身份验证状态尚未加载，this.auth.currentUser 可以为 null。在这种情况下，您可以从 userCredential 本身传递用户对象，如下所示：

createUserWithEmailAndPassword(this.auth, email, password)
  .then(async userCredential => 
    console.log('userCredential', userCredential);
    await this.updateUserProfile(userCredential.user, name);
    // Pass user object from here ^^^
)

// Take user object as parameter
async updateUserProfile(user: User, name: string) 
  updateProfile((user), 
    displayName: name, photoURL: `https://gravatar.com/avatar$md5(user.email)?d=identicon`
  )