React项目Firebase邮箱注册报错auth/invalid-email求助

云上老周

2026-8-2

解决Firebase Auth auth/invalid-email错误（React项目）

核心问题：事件处理函数拼写错误

你的代码中，邮箱和密码输入框绑定的是onchange（小写c），但定义的事件处理函数是onChange（大写C）。这导致用户输入的邮箱、密码完全没有更新到formData状态中，传给Firebase的始终是初始空字符串""，直接触发了invalid-email错误。

修复代码

将邮箱和密码输入框的onchange改为onChange：

// 邮箱输入框修正
<input
  type="email" 
  defaultValue={email}
  onChange={onChange}
  className="form-control"
  id="email" 
  aria-describedby="emailHelp" 
/>

// 密码输入框修正
<input
  type={showPassword? "text" : "password"}
  defaultValue={password}
  onChange={onChange}
  className="form-control" 
  id="password"
/>

额外优化建议

添加表单前置验证：提交前先检查邮箱格式和密码长度，提前拦截无效输入：

const onSubmitHandler= async (e) =>{
  e.preventDefault();
  // 基础格式验证
  if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
    alert("请输入有效的邮箱地址");
    return;
  }
  if (password.length < 6) {
    alert("密码长度不能少于6位");
    return;
  }
  try{
    const auth= getAuth()
    const userCredential = await createUserWithEmailAndPassword(auth,email,password);
    // 给updateProfile添加await，确保用户信息更新完成后再跳转
    await updateProfile(auth.currentUser,{displayName: name})
    navigate("/")
    alert("注册成功")
  }catch(error){
    console.log(error);
  }
}