Firebase Firestore如何单次获取数据替代onSnapshot实时监听

你当前使用的onSnapshot是Firestore的实时监听API，会建立长连接持续追踪数据变更，不符合单次拉取的需求，直接替换为单次查询APIgetDocs即可，具体修改如下：

修改要点 #

• 替换导入项：移除onSnapshot，引入单次查询方法getDocs
• 替换useEffect内逻辑：改用异步调用getDocs拉取数据，该方法只会执行一次查询，不会绑定持续监听
• 补全原代码缺失的React Hook导入，避免运行报错

修改后完整代码 #

// 替换导入项，移除onSnapshot，引入getDocs
import { getDocs, collection } from 'firebase/firestore';
import { useState, useEffect } from 'react';

function App() {
  const [books, setbooks] = useState([]);
  console.log(books);
  
  useEffect(() => {
    // 定义单次拉取的异步函数
    const getBookList = async () => {
      try {
        const snapshot = await getDocs(collection(db, 'books'));
        const bookList = snapshot.docs.map((doc) => ({
          ...doc.data(),
          id: doc.id
        }));
        setbooks(bookList);
      } catch (error) {
        // 可根据业务需求自定义错误处理逻辑
        console.error('数据拉取失败:', error);
      }
    };

    getBookList();
    // 无持续监听绑定，不需要额外写清理函数
  }, []);

  // 原有页面渲染逻辑
  return <div></div>;
}

补充说明 #

• getDocs触发后只会向Firestore发起一次查询请求，拿到返回结果后就结束请求，不会监听后续的数据增删改操作，完全匹配单次拉取的需求
• 不需要像使用onSnapshot时那样在useEffect里返回取消监听的清理函数，不存在内存泄漏风险

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