Firebase查询报错：调用startAt/startAfter前需先调用orderBy()

实现分页拉取后续4条评论的功能时，点击Load more comments按钮触发Firebase查询报错，错误信息如下：

Uncaught FirebaseError: Invalid query. You must not call startAt() or startAfter() before calling orderBy().

涉及两个文件的原代码如下：

SolutionComments.js #

import React, { useState } from "react"
import { useParams } from "react-router-dom"

import { useCollection } from "../../hooks/useCollection"

import Comment from "./Comment"
import CommentForm from "./CommentForm"

const SolutionComments = () => {
  const [activeComment, setActiveComment] = useState(null)
  const { id } = useParams()
  const { documents, fetchMore } = useCollection(`solutions/${id}/comments`, null, 4, [
    "createdAt",
    "desc",
  ])

  const fetchMoreComments = () => {
    fetchMore(documents[documents.length - 1])
  }

  return (
    <div className="mt-10">
      <CommentForm docID={id} />
      <div>
        {documents &&
          documents.map((comment) => (
            <Comment
              key={comment.id}
              comment={comment}
              replies={comment.replies}
              activeComment={activeComment}
              setActiveComment={setActiveComment}
            />
          ))}
      </div>
      <button onClick={fetchMoreComments} className="text-white bg-purple-500">
        Load More Comments!
      </button>
    </div>
  )
}

export default SolutionComments

useCollection 自定义Hook #

import { useEffect, useRef, useState } from "react"
// firebase import
import {
  collection,
  limit,
  onSnapshot,
  orderBy,
  query,
  startAfter,
  where,
} from "firebase/firestore"

import { db } from "../firebase/config"

export const useCollection = (c, _q, _l, _o) => {
  const [documents, setDocuments] = useState([])
  const [isLoading, setIsLoading] = useState(true)
  const [error, setError] = useState(null)

  // if we don't use a ref --> infinite loop in useEffect
  // _query is an array and is "different" on every function call
  const q = useRef(_q).current
  const o = useRef(_o).current
  let ref = collection(db, c)

  useEffect(() => {
    if (q) {
      ref = query(ref, where(...q))
    }
    if (o) {
      ref = query(ref, orderBy(...o))
    }
    if (_l) {
      ref = query(ref, limit(_l))
    }

    const unsubscribe = onSnapshot(ref, (snapshot) => {
      const results = []
      snapshot.docs.forEach(
        (doc) => {
          results.push({ ...doc.data(), id: doc.id })
        },
        (error) => {
          console.log(error)
          setError("could not fetch the data")
        }
      )
      // update state
      setDocuments(results)
      setIsLoading(false)
      setError(null)
    })

    // unsubscribe on unmount
    return unsubscribe
  }, [c, q, _l, o, isLoading])

  // I'm using this function to fetch next 4 comments including the previous ones.
  const fetchMore = (doc) => {
    ref = query(ref, orderBy(...o), startAfter(doc), limit(_l))
    onSnapshot(ref, (snapshot) => {
      const results = []
      snapshot.docs.forEach(
        (doc) => {
          results.push({ ...doc.data(), id: doc.id })
        },
        (error) => {
          console.log(error)
          setError("could not fetch the data")
        }
      )
      // update state
      console.log(results)
      setDocuments([...documents, results])
      setIsLoading(false)
      setError(null)
    })
  }

  return { documents, fetchMore, error, isLoading }
}

一共4个问题导致报错和功能异常：

• fetchMore函数里直接复用了useEffect中已经拼接了limit约束的ref查询对象，Firestore的query方法追加约束时，会出现startAfter被追加到原有limit约束之后的情况，违反了Firebase「分页游标必须在orderBy之后、limit之前调用」的规则，直接抛出对应错误。
• 追加新评论时的数组拼接逻辑错误：setDocuments([...documents, results])会把新拉取的评论数组作为嵌套元素插入原数组，导致评论列表结构异常。
• 每次调用fetchMore都会新建一个onSnapshot监听器但没有返回取消订阅的方法，多次点击加载更多会造成内存泄漏，重复拉取数据。
• useEffect依赖数组里加了isLoading，会导致加载状态变化时重复建立监听，重复拉取数据。

修改useCollection自定义Hook代码，调整查询构建逻辑、修复数据拼接问题、处理监听器泄漏问题：

import { useEffect, useRef, useState, useCallback } from "react"
// firebase import
import {
  collection,
  limit,
  onSnapshot,
  orderBy,
  query,
  startAfter,
  where,
} from "firebase/firestore"

import { db } from "../firebase/config"

export const useCollection = (c, _q, _l, _o) => {
  const [documents, setDocuments] = useState([])
  const [isLoading, setIsLoading] = useState(true)
  const [error, setError] = useState(null)
  // 保存最后一个文档快照作为分页游标
  const lastDocRef = useRef(null)
  // 保存分页监听的取消方法
  const moreUnsubscribeRef = useRef(null)

  const q = useRef(_q).current
  const o = useRef(_o).current
  const baseRef = collection(db, c)

  useEffect(() => {
    // 每次构建基础查询都从原始collection引用开始，避免约束叠加
    let queryRef = baseRef
    if (q) {
      queryRef = query(queryRef, where(...q))
    }
    if (o) {
      queryRef = query(queryRef, orderBy(...o))
    }
    if (_l) {
      queryRef = query(queryRef, limit(_l))
    }

    const unsubscribe = onSnapshot(queryRef, (snapshot) => {
      const results = []
      snapshot.docs.forEach((doc) => {
        results.push({ ...doc.data(), id: doc.id })
      })
      // 保存第一页最后一个文档作为初始游标
      lastDocRef.current = snapshot.docs[snapshot.docs.length - 1] || null
      setDocuments(results)
      setIsLoading(false)
      setError(null)
    }, (error) => {
      console.log(error)
      setError("could not fetch the data")
      setIsLoading(false)
    })

    // 组件卸载时取消所有监听
    return () => {
      unsubscribe()
      if (moreUnsubscribeRef.current) {
        moreUnsubscribeRef.current()
      }
    }
  // 移除isLoading依赖，避免重复触发
  }, [c, q, _l, o, baseRef])

  const fetchMore = useCallback(() => {
    // 没有更多数据或者正在加载时直接返回
    if (!lastDocRef.current || isLoading) return

    // 每次分页查询都从原始collection引用开始重新构建，保证约束顺序正确：where -> orderBy -> startAfter -> limit
    let queryRef = baseRef
    if (q) {
      queryRef = query(queryRef, where(...q))
    }
    if (o) {
      queryRef = query(queryRef, orderBy(...o))
    }
    queryRef = query(queryRef, startAfter(lastDocRef.current))
    if (_l) {
      queryRef = query(queryRef, limit(_l))
    }

    setIsLoading(true)
    // 先取消之前的分页监听，避免重复拉取
    if (moreUnsubscribeRef.current) {
      moreUnsubscribeRef.current()
    }

    moreUnsubscribeRef.current = onSnapshot(queryRef, (snapshot) => {
      const results = []
      snapshot.docs.forEach((doc) => {
        results.push({ ...doc.data(), id: doc.id })
      })
      // 更新游标为当前页最后一个文档
      lastDocRef.current = snapshot.docs[snapshot.docs.length - 1] || null
      // 正确拼接数组：展开新拉取的结果，不要嵌套
      setDocuments(prev => [...prev, ...results])
      setIsLoading(false)
      setError(null)
    }, (error) => {
      console.log(error)
      setError("could not fetch the data")
      setIsLoading(false)
    })
  }, [q, o, _l, baseRef, isLoading])

  return { documents, fetchMore, error, isLoading }
}

同步修改SolutionComments.js里的fetchMoreComments调用逻辑，Hook内部已经维护了分页游标，不需要手动传入最后一个文档：

const fetchMoreComments = () => {
  fetchMore()
}

如果需要优化体验，可以在没有更多数据时禁用加载更多按钮，避免无效点击。

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