AngularFire+Firestore分页报错：Hn非函数或返回值不可迭代

环境版本 #

• @angular/fire: 7.5.0
• @angular/core: 15.2.0
• firebase: 9.17.1
• Node.js: v20.11.1

错误信息 #

TypeError: Hn is not a function or its return value is not iterable
    at index.esm2017.js:19940:33
    at Ul (index.esm2017.js:19951:5)
    at $l._apply (index.esm2017.js:19876:19)
    at Rl (index.esm2017.js:19608:30)
    at angular-fire.js:227:48
    at angular-fire.js:160:59
    at _ZoneDelegate.invoke (zone.js:372:26)
    at Zone.run (zone.js:134:43)
    at NgZone.runOutsideAngular (core.mjs:24159:28)
    at runOutsideAngular (angular-fire.js:160:35)

分页代码 #

queryRef = query(
    collection(this.firestore.firestore, "Inventory_Transfers"),
    where("is_deleted", "==", false),
    where("restaurant_id", "==", restaurantId),
    where("status_by_portal_tab", "==", statusByPortalTab),
    where("requester_type", "==", requesterType),
    where("branch_ids_requested_for", "array-contains-any", batch),
    orderBy("create_on", "desc"),
    startAfter(lastVisible),
    limit(batchSize)
);

排查与解决方法 #

• 校验lastVisible的正确性
  确保lastVisible是DocumentSnapshot类型，而非文档的纯数据对象（比如不要传入doc.data()的结果）。首次分页时，将lastVisible设为undefined或null，此时startAfter会自动忽略，避免传入无效值。

• 检查Firestore索引配置
  复合查询必须配置对应索引，即使多数场景能运行，索引缺失仍可能触发底层异常。打开Firestore控制台，查看是否有未创建的索引提示，按照指引创建缺失的索引。

• 验证array-contains-any参数
  确保batch数组非空，且数组元素类型与branch_ids_requested_for字段类型完全匹配。空数组会导致查询逻辑异常，进而引发分页错误。

• 排查版本兼容性
  尝试升级firebase到9.x系列的稳定版本（如9.23.0），或降级至与@angular/fire 7.5.0更匹配的版本，避免版本不兼容导致的底层函数调用异常。

• 调试lastVisible的获取逻辑
  确认从查询结果中正确提取lastVisible：

  const querySnapshot = await getDocs(queryRef);
  const lastVisible = querySnapshot.docs.length > 0 ? querySnapshot.docs[querySnapshot.docs.length - 1] : undefined;
  

  不要对lastVisible进行序列化/反序列化操作，这会丢失DocumentSnapshot的内部结构，导致startAfter无法正常识别。

内容的提问来源于stack exchange，提问作者Ahmad Faisal Alhende