无法对Firestore集合使用onSnapshot方法，如何监听集合变更？

Firebase从v9版本开始推出了模块化Web SDK，替换了v8及更早版本使用的命名空间链式调用API，因此旧版本中db.collection('集合名').onSnapshot()的写法不再适用，才会抛出onSnapshot()不是一个函数的错误。

下面是React环境下的完整实现代码：

1. 前置依赖导入 #

首先确保你已经正确初始化Firebase实例，之后从Firestore模块导入所需方法：

import { collection, onSnapshot } from "firebase/firestore";
import { db } from "./firebaseConfig"; // 替换为你的Firebase初始化文件路径
import { useEffect, useState } from "react";

2. useEffect中实现监听及内存泄漏处理 #

const TodoApp = () => {
  const [todoList, setTodoList] = useState([]);

  useEffect(() => {
    // 生成目标集合的引用
    const todoCollectionRef = collection(db, "todos");
    // 开启实时监听，onSnapshot返回取消监听的方法
    const unsubscribe = onSnapshot(todoCollectionRef, (snapshot) => {
      // 遍历快照生成最新的todo列表
      const latestTodos = snapshot.docs.map(docItem => ({
        id: docItem.id,
        ...docItem.data()
      }));
      setTodoList(latestTodos);
    });

    // 组件卸载时执行取消监听逻辑，避免内存泄漏
    return () => unsubscribe();
  }, []);

  // 渲染todo列表
  return (
    <div>
      {todoList.map(todo => (
        <div key={todo.id}>{todo.content}</div>
      ))}
    </div>
  );
};

export default TodoApp;

如果需要兼容旧版本的链式写法，可以使用Firebase v9的compat兼容包，导入firebase/firestore/compat即可沿用原有v8版本的语法，不过该兼容方案仅建议旧项目过渡使用，不推荐新项目采用。

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