使用Firestore docChanges方法时出现doc.data is not a function错误

问题分析 #

你遇到的错误核心原因是：docChanges()返回的是Change对象，而非直接的DocumentSnapshot实例。每个Change对象包含doc（对应文档快照）、type（变更类型：added/modified/removed）等属性，直接调用doc.data()会报错，因为Change对象本身没有data()方法。

修正后的代码 #

getMessages(docId: string) {
  const msgCollection = collection(getFirestore(getApp()), `matches`, `${docId}`, `messages`);
  return query(msgCollection, orderBy('createdAt', 'asc'));
}

getMessages(matchId: string) {
  const q = this.chatSvc.getMessages(matchId);
  onSnapshot(q, (querySnapshot: any) => {
    querySnapshot.docChanges().forEach((change) => {
      // 通过change.doc获取真正的文档快照，再调用data()方法
      const messageData = change.doc.data();
      this.messages.push({ ...messageData, id: change.doc.id });
      
      // 后续可添加变更类型判断，过滤新增消息
      if (change.type === "added") {
        // 新增消息的专属处理逻辑
      }
    });
    console.log('mess', this.messages);
  });
}

关键说明 #

• 必须通过change.doc访问文档快照，再调用data()获取数据，change.doc.id才能拿到文档ID。
• 建议保留change.type === "added"的判断，避免重复添加历史消息，同时也能针对性处理修改、删除类的变更场景。

内容的提问来源于stack exchange，提问作者D.Hodges