ReactJS中使用Firebase Authentication更新用户资料失败问题

问题分析 #

你的代码存在三个核心问题导致用户名更新失败：

• 错误访问Firebase用户对象的username属性，Firebase Auth中存储用户名的字段是displayName而非username
• handleSubmit中调用异步的changeUsername后直接打印用户信息，此时异步更新尚未完成，无法获取最新值
• 你的AuthContext可能未监听用户状态变化，导致更新后组件无法自动获取最新的用户数据

解决方案 #

1. 修正用户属性访问 #

将所有currentUser.username替换为currentUser.displayName，这是Firebase Auth用户对象中存储用户名的正确字段。

2. 等待异步更新完成 #

handleSubmit是异步函数，调用changeUsername时需要加await，确保更新完成后再打印用户信息：

async function handleSubmit() {
  console.log(firstname + ' ' + lastname);
  console.log(currentUser?.displayName); // 使用可选链避免未定义报错
  console.log('after changing the name');
  const newusername = firstname + ' ' + lastname;
  await changeUsername(newusername); // 等待更新完成
  console.log(currentUser?.displayName);
}

3. 确保AuthContext监听用户状态 #

你的AuthContext需要通过onAuthStateChanged监听用户状态变化，这样当用户资料更新时，currentUser会自动更新并触发组件重渲染。以下是标准的AuthContext实现示例：

// @/firebase/AuthContext.js
import { createContext, useContext, useEffect, useState } from "react";
import { auth } from "./firebaseConfig";
import { onAuthStateChanged } from "firebase/auth";

const AuthContext = createContext();

export function AuthProvider({ children }) {
  const [currentUser, setCurrentUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, (user) => {
      setCurrentUser(user);
      setLoading(false);
    });
    return unsubscribe;
  }, []);

  return (
    <AuthContext.Provider value={{ currentUser }}>
      {!loading && children}
    </AuthContext.Provider>
  );
}

export const useAuth = () => useContext(AuthContext);

4. 可选：阻止表单默认提交行为 #

如果你的表单是原生HTML表单，记得在handleSubmit中阻止默认提交行为，避免页面刷新：

async function handleSubmit(e) {
  e.preventDefault(); // 阻止表单默认提交
  // ... 其余代码
}

// 在return的JSX中修改表单
return (
  <form onSubmit={handleSubmit}>
    <input
      type="text"
      value={firstname}
      onChange={(e) => setFirstname(e.target.value)}
      placeholder="名字"
    />
    <input
      type="text"
      value={lastname}
      onChange={(e) => setLastname(e.target.value)}
      placeholder="姓氏"
    />
    <button type="submit">更新名字</button>
  </form>
);

验证步骤 #

1. 完成上述修改后，打开浏览器控制台查看是否有报错信息
2. 提交表单后，检查Firebase控制台的用户管理页面，确认displayName是否已更新
3. 刷新页面或切换组件，确认用户信息是否能正确显示最新的displayName

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