React表单提交Firestore时布尔值被存为字符串的解决方法

问题场景 #

在ReactJS项目中开发对接Firestore的表单时，status字段提供true/false两个选项供用户选择，提交后该字段始终以字符串类型存入数据库，需要调整为布尔类型存储。

附原有问题代码：

const [masterMenu, setMasterMenu] = useState([])
const [form, setForm] = useState({
  status: "",
})
const masterMenuCollectionRef = collection(db, "masterMenu")
// 错误写法：setForm没有返回Promise，不能链式调用then
setForm({
  status: "",
}).then(() => { 
  
 })}
 }
 <div className='outer-container'>
  <h1 className='text-3xl font-bold py-2'>MASTER MENU</h1>
  <label style={{marginLeft: "0.3cm"}}><b>Status</b></label>
      <br />
        <select style={{marginLeft: "0.3cm", marginBottom: "20px", borderBottom: "2px solid 
 #006400", paddingBottom: "10px", width: "38cm"}}
          {/* 错误写法：select元素不存在valueAsBoolean属性 */}
          onChange={e => setForm({ ...form, status: (e.target.valueAsBoolean) })}>
          <option value="">Select Status</option>
          <option value="True">True</option>
          <option value="False">False</option>
        </select>

问题根因 #

• select表单元素的事件对象上不存在valueAsBoolean属性，该属性仅支持number、date等特定类型的input元素，select获取到的value默认始终是字符串类型，原有写法实际拿到的status是undefined
• option标签的value属性本身设置的是字符串类型的"True"/"False"，没有做类型转换
• 额外代码问题：useState返回的状态更新函数setForm没有返回Promise，原有代码中setForm().then()的写法会直接抛出运行时错误。

修复步骤 #

• 移除错误的valueAsBoolean写法，在onChange事件中手动将选中的字符串值转换为布尔类型
• （可选优化）将option的value调整为小写的"true"/"false"，简化类型转换逻辑
• 移除setForm后的链式then调用，如果需要在状态更新后执行逻辑，通过useEffect监听form状态变化实现。

修复后的代码示例 #

const [masterMenu, setMasterMenu] = useState([])
const [form, setForm] = useState({
  status: "",
})
const masterMenuCollectionRef = collection(db, "masterMenu")

// 表单提交逻辑示例
const handleSubmit = async (e) => {
  e.preventDefault();
  // 此时form.status已经是布尔类型，直接写入Firestore即可
  await addDoc(masterMenuCollectionRef, form);
  // 提交成功后重置表单
  setForm({ status: "" });
}

return (
  <div className='outer-container'>
    <h1 className='text-3xl font-bold py-2'>MASTER MENU</h1>
    <label style={{marginLeft: "0.3cm"}}><b>Status</b></label>
    <br />
    <select 
      style={{marginLeft: "0.3cm", marginBottom: "20px", borderBottom: "2px solid #006400", paddingBottom: "10px", width: "38cm"}}
      onChange={e => {
        const selectedVal = e.target.value;
        setForm(prev => ({
          ...prev,
          // 空选项保留空串做表单校验，选中项转为布尔值
          status: selectedVal ? selectedVal === "true" : ""
        }))
      }}
      value={form.status === "" ? "" : String(form.status)}
    >
      <option value="">Select Status</option>
      <option value="true">True</option>
      <option value="false">False</option>
    </select>
    {/* 其他表单字段和提交按钮 */}
  </div>
)

效果说明 #

调整后form.status的值会是标准JS布尔类型true/false，调用Firestore的写入接口时会自动识别为布尔类型字段存储，不会再转为字符串。

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