ReactJS中向Firebase Firestore添加数组成功但内部值为空如何解决？

问题排查与修复步骤 #

• 先确认发送前数组内容是否正确，在sendHistData函数开头添加日志打印数组值：

const sendHistData = () => {
    // 新增下面这行，打开浏览器控制台看打印的数组是否有值
    console.log("待上传的数组内容：", array_list);
    console.log("Creating Database...");
    doc
      .set({
        browsingHistory: array_list,
      })
      .then(() => {
        console.log("Document successfully written!");
      })
      .catch((error) => {
        console.log(error);
      });
  };

• 修复doc变量的空值风险，你当前的代码只有当user_id不为空时才会给doc赋值，如果user_id为空时调用sendHistData会直接报错，建议把文档实例的初始化挪到函数内部，避免全局变量污染：

const sendHistData = () => {
    const user_id = localStorage.getItem("userId");
    // 用户ID为空直接终止执行
    if (!user_id) return console.log("未获取到有效用户ID");
    const db = firebase.firestore();
    const doc = db.collection("users").doc(user_id);
    console.log("待上传的数组内容：", array_list);
    doc.set({
        browsingHistory: array_list,
      })
      .then(() => {
        console.log("文档写入成功");
      })
      .catch((error) => {
        console.error("写入失败：", error);
      });
};

• 删除冗余的add_data调用，你当前代码在全局已经调用过一次add_data，在user_id不为空的判断逻辑里又调用了一次，会导致数组重复插入两次0~9的数值，删掉全局的那次add_data()调用即可。
• 如果确认发送前数组有值但Firestore中仍显示为空，检查是否有其他异步写入操作覆盖了browsingHistory字段，或是Firebase安全规则限制了该字段的写入权限。

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