如何修复Firestore数据库配置错误？事件预订Web应用报错求助

云原生阿岚

2026-8-16

问题排查与修复

错误原因

这个错误是因为当你的events集合中没有任何文档数据时，snapshot.docChanges()会返回一个空数组。此时直接访问snapshot.docChanges()[0]得到的是undefined，再尝试读取它的doc属性就会触发Cannot read properties of undefined (reading 'doc')错误。

另外代码还有一个隐性问题：每次调用snapshot.docChanges()都会返回一个全新的数组副本，所以执行的snapshot.docChanges().shift()只是修改了临时数组，不会影响后续forEach遍历的数组，最终showEvents还是会处理到第一个元素，导致重复渲染。

修复代码

db.collection("events").onSnapshot((snapshot) => {
  const changes = snapshot.docChanges();
  
  // 先判断是否有数据，再处理最新事件
  if (changes.length > 0) {
    const newestEvent = changes[0].doc.data();
    const id = changes[0].doc.id;
    showLatestEvent(newestEvent, id);

    // 移除第一个元素（操作的是同一个数组）
    changes.shift();
  }

  // 遍历剩下的事件
  changes.forEach((event) => {
    showEvents(event.doc.data(), event.doc.id);
  });
});