React+Firestore写入数据时数值被存为字符串如何解决

你的代码里提交到Firestore的title始终是字符串，核心原因有2个：

• 即使你给输入框设置了type="number"，原生DOM事件返回的e.target.value默认始终是字符串类型。你在onChange回调里直接把这个字符串值赋值给了form.title，直接覆盖了初始化时的数值类型值，最终提交到Firestore的自然是字符串。
• 你在state初始化、表单重置时写的Number("")实际运行结果是0，不是空值，本身写法就不符合空表单的预期，也没有在输入、提交环节做类型转换。

1. 修改输入框的onChange回调，拿到输入值后主动转换为数值类型再更新state：

<input 
  placeholder="Upload Your Slots In HH:MM 24hr Format"
  type="number" 
  value={form.title} 
  onChange={e => setForm({...form, title: Number(e.target.value)})} 
/>

2. 调整表单初始化、重置逻辑和校验规则，避免无效数值被提交：

// 表单初始值调整
const [form, setForm] = useState({
  title: '',
  desc: "",
})

// 提交逻辑调整
const handleSubmit = e => {
  e.preventDefault()

  if (
    Number.isNaN(Number(form.title)) ||
    !form.desc.trim()
  ) {
    alert("Please fill out all fields")
    return
  }

  addDoc(recipesCollectionRef, {
    ...form,
    title: Number(form.title) // 提交前再做一次类型兜底，避免异常值
  })

  setForm({
    title: '',
    desc: "",
  })

  setPopupActive(false)
}

你当前输入框的placeholder提示用户输入HH:MM格式的24小时时间，但type="number"类型的输入框不允许输入冒号字符。如果你的业务需要存储带冒号的时间字符串，本身就不需要转数值类型；如果是存储时间戳、小时/分钟单独的数值，当前类型设置才是匹配的。

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