Firebase Auth无法接收并验证邮箱密码数据 故障咨询

问题根因排查 #

核心问题为表单组件未正确绑定输入值与状态更新逻辑，导致提交给Firebase的邮箱、密码始终为空值：

• 自定义的Emailform、Passform组件未接收父组件传入的value、onChange属性，也未将属性绑定到内部的input元素，输入内容无法同步到上层状态
• 注册页面的提交按钮未给registerWithEmailAndPassword方法传递邮箱、密码参数，函数接收到的入参为点击事件对象而非有效鉴权信息
• Form组件属性读取错误，父组件传入的type属性被误读为不存在的input属性，输入框类型配置失效
• 输入框外层嵌套了冗余的<form>标签，未阻止默认提交行为，触发回车提交时会刷新页面打断鉴权流程

修复代码 #

1. 修复Emailform、Passform组件 #

// 替换原有Emailform定义
const Emailform = ({value, onChange}) => {
  return (
    <div className={style.formBox}>
      <label className={style.label}>Email:</label>
      {/* 将form替换为div，避免默认提交行为 */}
      <div className={style.input}>
        <input 
          type="email" 
          name="email" 
          required
          value={value}
          onChange={onChange}
        />
      </div>
    </div>
  );
}

// 替换原有Passform定义
const Passform = ({value, onChange}) => {
  return (
    <div className={style.formBox}>
      <label className={style.label}>Password:</label>
      <div className={style.input}>
        <input 
          type="password" 
          name="password" 
          required
          value={value}
          onChange={onChange}
        />
      </div>
    </div>
  );
}

2. 修复注册按钮的点击事件 #

修改Signup组件内的提交按钮代码：

<input 
  type="submit" 
  value="Sign Up"
  onClick={() => registerWithEmailAndPassword(email, password)} 
/>

3. 修复Form组件属性读取逻辑 #

替换原有Form组件定义：

function Form(props) {
  return (
    <div className={style.formBox}>
      <label className={style.label}>{props.label}:</label>
      <div className={style.input}>
        <input 
          type={props.type} 
          name={props.label.toLowerCase().replace(/\s/g, '-')}
          required
        />
      </div>
    </div>
  );
}

修复完成后输入的邮箱、密码会正常同步到对应状态，提交时可正常传入Firebase鉴权接口完成校验。

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