Firebase用户登录后无法更新用户名，displayName显示null问题求助

核心问题点 #

• signup方法执行完成后，认证模块的全局currentUser对象不会同步立刻更新，此时直接调用updateProfile传入的currentUser是未初始化的空值，导致更新用户名请求失败，所以displayName一直为null
• 定时器中直接写<Redirect to="/" />的写法不符合React语法规则，JSX元素无法在普通函数执行上下文中触发路由跳转，该跳转逻辑完全不会生效
• 现有异常捕获逻辑未打印updateProfile阶段的明确报错，可打开控制台确认大概率存在currentUser is null类的报错信息

修复代码示例 #

不要依赖全局的currentUser，直接取signup返回的新创建用户实例来调用updateProfile即可，同步调整路由跳转逻辑：

// 组件内先引入react-router的跳转方法，v6及以上版本用useNavigate
import { useNavigate } from 'react-router-dom';

// 组件内先初始化跳转实例
const navigate = useNavigate();

const onSubmit = async ({ name, email, password }) => {
    setIsLoading(true);
    try {
      // 拿到signup返回的新创建的用户凭据
      const userCredential = await signup(email, password);
      const newUser = userCredential.user;
      // 直接用刚返回的用户实例更新资料，不需要等全局currentUser更新
      await updateProfile(newUser, {
        displayName: name,
      });
      // 执行跳转，无需定时器
      navigate("/");
      setIsLoading(false);
    } catch (error) {
      setIsLoading(false);
      console.log(error);
    }
  };

补充说明 #

• 如果需要全局的用户状态同步更新，可在updateProfile执行完成后主动触发一次全局用户状态的刷新，避免后续读取全局currentUser时还是旧数据
• 无需设置5秒跳转定时器，await updateProfile执行完成后就已经完成了用户名写入，可直接跳转

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