Firebase getDocs返回空数组并触发无限循环问题求助

问题现象 #

基于Firebase实现文档搜索功能时，输入集合中不存在的值，getDocs会返回空数组，同时触发无限循环。循环发生在以下get函数中，每次执行到await getDocs(query)这一行后，函数会重新开始执行：

export async function get() {
  const query = query(collectionRef, orderBy("title"), startAt("Abbb"), endAt("Abbb\uf8ff"));
  const snapshot = await getDocs(query);
}

期望效果：快照为空时不显示任何内容，且不触发循环。

相关集合定义代码：

const collectionRef = getCollectionRef<Model>("collectionName") // CollectionReference<Model>

/**
 * 获取带类型的集合引用。
 * @param collectionName - 集合名称。
 */
function getCollectionRef<T = DocumentData>(collectionName):CollectionReference<T> {
  return collection(database, collectionName) as CollectionReference<T>;
}

问题原因 #

无限循环的核心原因是函数在组件渲染周期内被重复调用：

• 若get函数直接写在React组件顶层，组件每次渲染都会执行它；getDocs异步操作完成后，若更新了组件状态，又会触发组件重新渲染，进而再次调用get，形成循环。
• 若使用useEffect但未添加正确依赖项，也会导致useEffect重复执行，间接引发循环。

解决方案 #

1. 限定函数执行时机
   在React环境中，将搜索逻辑放在useEffect钩子中，添加搜索关键词等必要依赖项，避免无意义的重复调用：

   import { useEffect, useState } from 'react';
   
   // 用state管理搜索关键词
   const [searchTerm, setSearchTerm] = useState("Abbb");
   const [searchResults, setSearchResults] = useState([]);
   
   useEffect(() => {
     const fetchData = async () => {
       const query = query(collectionRef, orderBy("title"), startAt(searchTerm), endAt(searchTerm + "\uf8ff"));
       const snapshot = await getDocs(query);
       
       // 处理空快照：直接设置空状态
       if (snapshot.empty) {
         setSearchResults([]);
         return;
       }
       
       // 有数据时提取并更新状态
       const results = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
       setSearchResults(results);
     };
   
     fetchData();
   }, [searchTerm, collectionRef]); // 依赖项：搜索关键词和集合引用
   

2. 确保集合引用稳定
   如果collectionRef在组件内部创建，用useMemo包裹它，避免每次渲染重新生成引用导致useEffect重复触发：

   const collectionRef = useMemo(() => getCollectionRef<Model>("collectionName"), []);
   

3. 空快照处理逻辑
   获取快照后直接判断snapshot.empty，为空时仅设置空数据状态，不执行额外触发渲染的操作，避免空结果引发不必要的组件更新。

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