REACT JS + Firebase：number类型输入数据存入数据库后变为字符串问题

问题原因 #

• HTML输入框的e.target.value属性无论type设置为何种类型，默认返回值都是字符串类型，这是DOM的标准行为，所以你一开始直接把e.target.value存入状态，变量本身就是字符串类型，写入Firebase自然会被识别为字符串。
• 后续你修改为e.target.valueAsNumber的写法是正确的，但你状态的初始值设置为了空字符串""，如果用户未输入内容直接提交，或者输入内容不符合数值规范时，valueAsNumber会返回NaN，也会导致类型异常。

修复方案 #

1. 调整状态初始值为数值类型

// 将初始值从空字符串改为数值类型的初始值
const [precio, setPrecio] = useState(0);
// 如果需要区分「未输入」状态，也可以初始化为null，提交时额外判断即可

2. 提交数据前强制做类型转换，避免异常
   在写入Firebase的set方法中，对precio字段做一次强制数值转换，覆盖所有可能出现字符串的场景：

docRef.set({
    materia: materia,
    descripcion: descripcion,
    editorial: editorial,
    grado: grado,
    // 强制转换为数值，整数场景可以换用parseInt，小数场景换用parseFloat
    precio: Number(precio),
    id: docRef.id
})

3. 可选增加提交前的合法性校验
   可以在提交逻辑最前面增加数值合法性判断，避免把NaN写入数据库：

const register = (e) => {
    e.preventDefault();
    // 增加校验逻辑
    const precioNum = Number(precio);
    if (isNaN(precioNum)) {
        window.alert("请输入合法的价格数值");
        return;
    }
    // 原有后续逻辑
}

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