React中点击删除按钮删除Firebase用户账户的报错解决

错误原因 #

Cannot read properties of null (reading 'delete') 本质是调用deleteUser时传入的用户对象为null，常见两种情况：

• 用户未登录，auth.currentUser自然为null
• 组件初始化时Firebase Auth还未完成用户状态同步，此时auth.currentUser还没被赋值

正确实现步骤 #

1. 从Auth上下文获取用户（而非直接用auth.currentUser） #

既然你已经有UserAuthContext.js，优先用上下文里维护的用户状态，它会实时同步用户登录状态：

import { useContext } from 'react';
import { UserAuthContext } from './UserAuthContext';

// 在组件中调用
const { user } = useContext(UserAuthContext);

2. 编写安全的handleDelete函数 #

先判断用户是否存在，再执行删除，同时处理Firebase的重新认证要求（删除用户需要用户最近登录过，否则会触发权限错误）：

import { deleteUser, reauthenticateWithCredential, EmailAuthProvider } from 'firebase/auth';

const handleDelete = async () => {
  // 先检查用户是否存在
  if (!user) {
    alert('请先登录');
    return;
  }

  try {
    // 邮箱密码登录的用户需先重新认证（其他登录方式需对应调整凭证）
    const email = user.email;
    const password = prompt('请输入当前账户密码以确认删除');
    if (!password) return;

    const credential = EmailAuthProvider.credential(email, password);
    await reauthenticateWithCredential(user, credential);

    // 执行账户删除
    await deleteUser(user);
    alert('账户已成功删除');
    // 这里可添加跳转逻辑，比如回到登录页
  } catch (error) {
    console.error('删除账户失败:', error.message);
    // 根据错误码给出针对性提示
    if (error.code === 'auth/wrong-password') {
      alert('密码错误，请重新输入');
    } else if (error.code === 'auth/user-token-expired') {
      alert('会话已过期，请重新登录后再尝试');
    }
  }
};

3. 绑定删除按钮 #

确保按钮只在用户登录时显示，避免无效点击：

{user && <button onClick={handleDelete}>删除我的账户</button>}

额外注意事项 #

• 若你的Auth上下文未维护user状态，需完善上下文监听用户状态变化：

// UserAuthContext.js 示例代码
import { createContext, useContext, useEffect, useState } from 'react';
import { auth } from './firebaseConfig';
import { onAuthStateChanged } from 'firebase/auth';

const UserAuthContext = createContext();

export function UserAuthProvider({ children }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
      setUser(currentUser);
    });
    return unsubscribe;
  }, []);

  return (
    <UserAuthContext.Provider value={{ user }}>
      {children}
    </UserAuthContext.Provider>
  );
}

export const useUserAuth = () => useContext(UserAuthContext);

• 删除用户后，记得清理关联的Firestore/Storage数据，避免残留无效资源
• 永远不要跳过身份验证执行删除操作，防止误删或恶意操作

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