ReactJS集成Firebase登录遇auth/invalid-email错误求助

你的登录功能触发auth/invalid-email错误，核心原因是TextInput组件未正确同步输入值到父组件状态：

从你提供的网络请求可以看到，发送给Firebase的email和password都是空字符串——这是因为TextInput组件没有绑定父组件传递的value和onChange属性，导致输入框内容无法同步到SignInForm的email、password状态中。

修复后的TextInput组件代码 #

const TextInput = (props) => {
  return (
    <div className="flex flex-col gap-1">
      <label className="font-light text-gray-600 text-sm">{props.label}</label>
      <input
        type={props.type}
        className="border-gray-200 border rounded w-full p-2 focus:outline-0"
        value={props.value}
        onChange={props.onChange}
        required={props.required}
      />
    </div>
  );
};

export default TextInput;

关键修改点 #

• 给input标签添加value={props.value}：将父组件的状态值绑定到输入框，实现受控组件
• 添加onChange={props.onChange}：将输入框的变化事件传递回父组件，更新对应状态
• 传递required={props.required}：确保表单的必填验证生效

修复后，输入框的内容会正确同步到父组件的状态中，登录时就能把正确的邮箱和密码传给Firebase，解决auth/invalid-email错误。

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