创建帐户后 displayName 始终返回 null

Question

我有一个使用 Firebase 作为后端的 Vue 应用程序。新用户使用电子邮件和密码选项注册。这是 firebase 方法：

firebase.auth()

          .createUserWithEmailAndPassword(this.user.email, this.user.password)

          .then((res) => {

            res.user

              .updateProfile({

                displayName: this.user.username,

              })

              .then(() => {

              });

          })

          .catch((error) => {

            this.error = error.message;

            console.log("err", error);

          });

在我的 main.js 文件中，我有如下所示的 onAuthStateChanged 方法：

firebase.auth().onAuthStateChanged((user) => {

  if (user) {

    console.log("user", user);

    console.log("nme", user.displayName);

    console.log("email", user.email);

    store.dispatch("fetchUser", user);

  } else {

    store.dispatch("logout");

  }

当用户注册时，当然会触发此方法。问题是我无法访问用户的 displayName 属性，由于某种原因，当用户注册时它总是空的。当我刷新页面时，它有值，但在注册它的 null 并将 null 值作为用户名传递给 Vuex 之后。奇怪的是，例如可以立即访问电子邮件。这是我的控制台的屏幕截图：

第一部分是“console.log("user", user)，然后是其他打印。正如您在用户对象中看到的那样，displayName 有一个值，但是当我调用 user.displayName 时，它为空。

有人可以向我解释为什么会这样吗？提前致谢！

Answer 1

这是因为该updateProfile()方法是异步的，不会触发通过 设置的监听器onAuthStateChanged()。因此，当onAuthStateChanged()在创建用户（并登录，因为在创建用户帐户之后，用户也已登录）后立即触发侦听器时， 的值尚未更新displayName。当方法返回的承诺updateProfile()得到解决时，您可能应该更新 Vuex Store 中的状态。以下几行： firebase    .auth()    .createUserWithEmailAndPassword(this.user.email, this.user.password)    .then((res) => {      return res.user.updateProfile({        displayName: this.user.username,      });    })    .then(() => {      //Update the Vuex Store here with firebase.auth().currentUser      console.log(firebase.auth().currentUser.displayName);    })    .catch((error) => {      this.error = error.message;      console.log('err', error);    });