Firebase 9调用getDocs(qry)无响应 既不返回结果也不抛出错误

核心排查方向 #

• 补充异步错误捕获逻辑：你当前代码没有对getDocs做异常捕获，部分静默错误会被吞导致感知不到失败。给异步逻辑包裹try/catch块，捕获后打印错误信息即可确认问题根因。
• 核对Firebase初始化顺序：必须确保getFirestore()调用是在initializeApp(yourFirebaseConfig)之后执行，初始化顺序错误会导致Firestore实例状态异常，请求无响应。
• 检查安全规则与索引配置：
  1. 进入Firebase控制台的Firestore安全规则页，确认你的客户端身份有models集合的读权限，权限被拒时部分场景下SDK会出现无响应的异常表现
  2. 你当前查询用到了orderBy("createdAt", "desc")，虽然单字段索引默认开启，但如果此前手动关闭了createdAt字段的索引，需要到控制台索引页重新创建对应索引
• 调整getDocs的数据源配置：Firestore Web SDK默认开启离线持久化，无网络环境下默认会等待网络恢复再返回服务端数据，导致请求挂起。可以显式指定数据源强制走服务端请求，无网络时会直接抛出异常：

  // 调整getDocs调用，显式指定数据源
  const documentSnapshots = await getDocs(qry, { source: 'server' });
  

• 检查运行环境网络限制：部分浏览器插件、代理规则、企业防火墙会拦截Firebase域名请求，导致请求被丢弃无响应。可以打开浏览器控制台的网络面板，查看发往firestore.googleapis.com的请求状态是否正常。

优化后代码示例 #

import {
    collection,
    getFirestore,
    DocumentData,
    getDocs,
    query,
    orderBy,
    Query,
    limit,
    startAfter,
    DocumentSnapshot,
    GetDocsOptions,
} from "firebase/firestore";

const db = getFirestore();
let last: DocumentSnapshot | null = null; // 初始化默认值避免边界错误
const modelsRef = collection(db, "models");

export const getModels = async (initial: boolean): Promise<DocumentData[]> => {
    const results: DocumentData[] = [];
    let qry: Query<DocumentData>;
    
    if (initial) {
        last = null; // 首次加载重置分页游标
        qry = query(modelsRef, orderBy("createdAt", "desc"), limit(8));
    } else {
        if (!last) return results;
        qry = query(
            modelsRef,
            orderBy("createdAt", "desc"),
            startAfter(last),
            limit(8)
        );
    }

    try {
        console.log("before");
        // 显式指定服务端数据源，避免离线挂起
        const documentSnapshots = await getDocs(qry, { source: 'server' } as GetDocsOptions);
        console.log("after");

        documentSnapshots.forEach((doc) => {
            results.push(doc.data());
        });

        // 仅在有返回结果时更新游标
        if (documentSnapshots.docs.length > 0) {
            last = documentSnapshots.docs[documentSnapshots.docs.length - 1];
        }
        console.log(initial);
        return results;
    } catch (err) {
        console.error("getModels请求失败: ", err);
        throw err; // 抛出错误供上层业务处理
    }
};

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