Firebase邮箱密码认证遇undefined及admin-restricted-operation错误

问题核心原因 #

1. 参数传递不匹配 #

AuthContext.tsx中的signUp函数定义为接收对象类型参数，通过解构获取email和password：

function signUp({ email, password }: IUserData) {
  console.log("email: " + email + ", password: " + password);
  return createUserWithEmailAndPassword(auth, email, password);
}

但在Signup.tsx的handleSubmit中，你将email和password作为两个独立参数传入：

await signUp(email, password);

这种调用方式会导致函数内部解构失败，最终得到undefined值，进而触发Firebase的ADMIN_ONLY_OPERATION错误。

2. Firebase认证方式未启用（潜在问题） #

即使修复参数传递，若Firebase控制台未开启邮箱/密码认证，仍会出现类似权限错误。

分步解决方案 #

步骤1：修正参数传递方式 #

修改Signup.tsx中handleSubmit的signUp调用，改为传递对象：

const handleSubmit = async (e: any) => {
  e.preventDefault();
  try {
    console.log(email);
    console.log(password);
    await signUp({ email, password }); // 改为传递对象
  } catch (error) {
    console.log(error);
  }
};

步骤2：启用Firebase邮箱/密码认证 #

1. 登录Firebase控制台，进入目标项目
2. 导航至「Authentication」→「Sign-in method」
3. 找到「Email/Password」选项，点击启用并保存设置

额外优化建议 #

• 类型安全强化：避免使用any类型，给IContext和函数返回值添加明确类型，例如：

  import { UserCredential, User } from "firebase/auth";
  
  interface IContext {
    signUp: (userData: IUserData) => Promise<UserCredential>;
    logIn: (userData: IUserData) => Promise<UserCredential>;
    logOut: () => Promise<void>;
    user: User | null;
  }
  

• 受控组件完善：给input添加value属性，确保视图与状态同步：

  <input
    type="email"
    placeholder="Email or phone number"
    onChange={(e) => setEmail(e.target.value)}
    value={email}
  />
  

• useEffect依赖优化：给监听用户状态的useEffect添加空依赖数组，避免重复订阅：

  useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
      setUser(currentUser);
    });
    return () => unsubscribe();
  }, []); // 空数组确保只执行一次
  

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