React调用Firebase登录报错auth/missing-email但邮箱确实存在如何解决

错误根因 #

你调用Firebase的signInWithEmailAndPassword方法时没有传入必填的邮箱、密码参数，该方法要求的入参顺序为：signInWithEmailAndPassword(auth实例, 邮箱字符串, 密码字符串)，你仅传入了第一个auth参数，所以Firebase判定未提供邮箱，抛出auth/missing-email错误。

修复方案 #

• 第一步：在LoginForm组件内声明邮箱、密码的受控状态，绑定表单输入

import { useState } from 'react'

// 组件内部逻辑
const [email, setEmail] = useState('')
const [password, setPassword] = useState('')

// 表单输入绑定示例
return (
  <div>
    <input 
      type="email" 
      value={email} 
      onChange={(e) => setEmail(e.target.value)} 
      placeholder="请输入登录邮箱" 
    />
    <input 
      type="password" 
      value={password} 
      onChange={(e) => setPassword(e.target.value)} 
      placeholder="请输入登录密码" 
    />
    <button onClick={loginWithEmailHandler}>登录</button>
  </div>
)

• 第二步：修改登录处理函数，传入邮箱、密码参数

function loginWithEmailHandler() {
  signInWithEmailAndPassword(auth, email, password)
  .then((result) => {
      const user = result.user;
      console.log(user.email, user.displayName);
      navigate("/");
  })
  .catch((error) => {
      const errorCode = error.code;
      const errorMessage = error.message;
      setMode("INCORRECT");
      console.log(errorCode, errorMessage);
  });
}

参数校验方法 #

• 调用登录接口前打印参数确认取值是否正常，也可以增加前端空值校验拦截非法请求

function loginWithEmailHandler() {
  // 校验参数取值
  console.log('提交的邮箱：', email)
  console.log('提交的密码：', password)
  
  // 前端空值校验
  if (!email.trim() || !password.trim()) {
    setMode("INCORRECT")
    console.log('邮箱或密码不能为空')
    return
  }

  signInWithEmailAndPassword(auth, email, password)
  // 后续业务逻辑不变
}

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