React开发中如何将Firestore文档ID存入对象数组？zipObject用法异常排查

当前_.zipObject实现的核心问题 #

• 参数结构完全错误：lodash的_.zipObject原生要求接收两个一维数组作为参数，分别代表键集合、值集合，实现一对一配对。但当前代码给两个参数都额外套了一层方括号，相当于把整个id数组、整个数据数组各自当作单个元素传入，配对逻辑完全失效。
• 内联赋值清空了已收集的有效数据：括号内写的(ids = [])、(items = [])是JS内联赋值表达式，会把之前循环遍历收集到的非空id列表、数据列表强制重置为空数组，最终传入方法的两个参数都是空集合，根本生成不了有效结果。
• 输出结构和需求不匹配：就算修正参数传递错误，_.zipObject返回的是“文档ID为属性名、对应文档数据为属性值”的普通对象，和想要的“每条数据对象自身携带文档ID”的数组结构完全不符；加上代码之前已经执行过一次setItems(纯数据数组)，后面又把items状态替换成对象，会让状态类型从数组变为对象，直接导致后续依赖数组遍历的列表渲染崩溃。
• 冗余状态更新引发额外性能开销：同一次快照回调里连续两次调用setItems，会触发两次不必要的组件重渲染，甚至可能因为状态更新顺序问题导致界面闪烁。

正确实现文档ID关联的方案 #

不需要拆分单独的id数组，也不需要借助lodash做二次拼接，在遍历每个Firestore快照文档时，直接将doc.id合并到对应的数据对象中，就能一步得到带ID的目标数组。

重构后的参考代码：

function getEm() {
  setLoading(true);
  ref.onSnapshot((querySnapshot) => {
    const itemList = [];
    querySnapshot.forEach((doc) => {
      // 直接将文档ID作为独立属性合并到数据对象，按顺序推入最终数组
      itemList.push({
        id: doc.id,
        ...doc.data()
      });
    });
    // 一次性设置最终数组，无需单独维护id列表状态
    setItems(itemList);
    setLoading(false);
  });
}

实现说明：

• 最终生成的数组每一项都自带id字段，对应Firestore的原生文档ID，后续开展编辑、删除、页面跳转等操作时，可直接从数据对象上读取对应ID，不需要额外维护两个数组的映射关系。
• 如果业务场景确实需要单独维护全量ID列表，可以在遍历过程中同步收集id值，再通过setIds单独设置对应状态，从根源上避免两个状态不同步的问题。
• 这种实现方式去掉了无意义的拆分、拼接流程，减少了中间数据转换环节，也彻底规避了原代码中的语法错误。

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