为什么Firestore会将设置为number类型的counter字段以字符串形式存储

问题根源 #

即使<TextField>的type属性设置为number，HTML原生输入框的target.value始终返回字符串类型，因此你在onChange回调中存入state的counter实际已经是字符串类型，提交到Firestore时自然会以字符串格式存储。

解决方法 #

有两种常用的修复方案，任选其一即可：

方案1：输入时直接转换为数字存入state

修改TextField的onChange回调，在更新state前就把输入值转为数字类型，保证state中存储的始终是数字：

onChange={(e) => setCounter(Number(e.target.value))}

如果需要处理空输入的边界场景，可以加兜底逻辑，避免空输入转为0不符合预期：

onChange={(e) => setCounter(e.target.value === '' ? '' : Number(e.target.value))}

方案2：提交到Firestore时临时转换

如果不想修改state的存储类型，也可以在调用set方法提交数据时，临时把counter转为数字：

const ref = userRef.set({
  // 其他字段保持不变
  counter: Number(counter)
});

修改后完整代码示例 #

const [counter, setCounter] = useState(0);

const handleSubmit = (e) => {
  e.preventDefault();
  try {
    const userRef = firestore.collection("users").doc();
    const ref = userRef.set({
      // 其他字段保持不变
      counter,
    });
    console.log(" saved");
  } catch (err) {
    console.log(err);
  }
};

// 组件渲染部分
<Grid item>
  <TextField
    type="number"
    label="counter"
    fullWidth
    required
    value={counter}
    onChange={(e) => setCounter(Number(e.target.value))}
  />
</Grid>

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