React环境下Firestore数值字段存为字符串的技术问询

问题核心在于：浏览器的input元素无论设置type="number"还是其他类型，返回的e.target.value始终是字符串类型。你直接把这个字符串存入state，最终传给Firestore的自然也是字符串，导致字段类型不符合预期。

修复方案：存入state前转为数值类型 #

最合理的做法是在更新state时就将输入值转换成数值，这样组件内的age始终保持数值类型，后续操作无需重复转换：

修改input的onChange逻辑：

<input
     type="number"
     className="loginOrSignupPopup__age"
     placeholder="Age"
     value={age}
     onChange={(e) => {
         // 用Number()转换为通用数值，整数场景也可以用parseInt(e.target.value, 10)
         const numericAge = Number(e.target.value);
         setAge(numericAge);
         console.log(typeof numericAge); // 现在输出number
     }}
 />

备选方案：存储到Firestore时临时转换 #

如果不想修改state的类型，也可以在调用addDoc时直接转换数值：

async function createUser() {
    await addDoc(usersCollectionRef, { name: name, age: Number(age) });
    console.log(typeof Number(age)); // number
}

补充提示 #

• 若用户清空输入框，Number("")会返回0，如果需要处理空值场景，可添加判断：

  const numericAge = e.target.value ? Number(e.target.value) : null; // 或你需要的默认值
  

• 使用parseInt时务必传入第二个参数10（指定十进制），避免意外触发八进制解析逻辑。

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