Firebase授权中displayName无法更新，注册后设置及授权配置问题

问题描述 #

我是Firebase新手，正在使用Web模块化API，在用户注册后尝试更新displayName时遇到问题。以下是我的代码：

const register = () => {
        if (!firstName || !lastName) {
            return alert("Enter Full Name");
        }
        else {
            setName(firstName + ' ' + lastName);
        }
        createUserWithEmailAndPassword(auth, email, password)
           .then((result) => {

                console.log("Before UPDATE" + JSON.stringify(result.user))
                updateProfile(result.user,{
                    displayName:name,
                })
            })
            .then(console.log('auth Current USER' + JSON.stringify(auth.currentUser)))
            .catch((error) => {
                alert(error)
                console.log(error)
            })
            console.log("AFTER EVRYTHING"+JSON.stringify(auth.currentUser));
    }

我已查阅Firebase官方文档，但该问题已困扰我两天。此外，想咨询是否可在授权阶段直接设置displayName？

问题分析与修复方案 #

1. 状态更新异步导致的取值问题 #

setName是React状态更新函数，属于异步操作，在updateProfile中直接使用name大概率拿不到刚设置的最新值。直接用firstName + ' ' + lastName作为displayName的值即可，无需通过状态中转。

2. Promise链未正确处理异步操作 #

updateProfile是异步Promise函数，必须返回它的Promise，否则下一个.then()会在updateProfile完成前执行，导致打印的auth.currentUser还是未更新的状态。同时，最后的console.log在Promise链外部，会先于异步操作执行，自然也拿不到更新后的数据。

修复后的代码 #

const register = () => {
    if (!firstName || !lastName) {
        return alert("Enter Full Name");
    }
    const fullName = firstName + ' ' + lastName;
    createUserWithEmailAndPassword(auth, email, password)
        .then((result) => {
            console.log("Before UPDATE" + JSON.stringify(result.user));
            // 返回updateProfile的Promise，保证链式调用顺序
            return updateProfile(result.user, {
                displayName: fullName,
            });
        })
        .then(() => {
            // 此时updateProfile已完成，可获取更新后的用户信息
            console.log('auth Current USER' + JSON.stringify(auth.currentUser));
            console.log("AFTER EVERYTHING" + JSON.stringify(auth.currentUser));
        })
        .catch((error) => {
            alert(error);
            console.log(error);
        });
}

关于授权阶段直接设置displayName的问题 #

不能在调用createUserWithEmailAndPassword时直接设置displayName，这个API仅支持通过邮箱和密码创建用户，用户的附加信息（如displayName、photoURL等）必须在用户创建成功后，通过updateProfile方法来设置。不过你可以像上面修复后的代码一样，在注册成功的回调里立刻调用updateProfile，达到近似“授权阶段设置”的效果。

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