将Firestore v8的getQuery重构为v9时遇query.limit报错问题

我正在把一个React、Redux和useFirestore教程的仓库重构为适配Firestore Web版本9，排查错误时遇到了query.limit is not a function问题，不知道怎么解决。

原v8代码 #

import { CollectionReference, Query } from "@firebase/firestore-types";

import { CollectionOptions } from "firebase-config/queryOptions";
import getFirestoreRef from "./getFirestoreRef";

const getQuery = (collection: string, options?: CollectionOptions) => {
  const baseQuery: CollectionReference = getFirestoreRef(collection);
  let query: Query = baseQuery;
  if (options && options.queries) {
    const { queries } = options;
    queries.forEach(({ attribute, operator, value }) => {
      query = query.where(attribute, operator, value);
    });
  }

  if (options && options.sort) {
    const { attribute, order } = options.sort;
    query = query.orderBy(attribute, order);
  }

  if (options && options.limit) {
    query = query.limit(options.limit); // query.limit is not a function
  }

  return query;
};

export default getQuery;

尝试的v9代码（未正常运行） #

import { CollectionReference, Query } from "@firebase/firestore-types";
import { limit, orderBy, query, where } from "firebase/firestore";

import { CollectionOptions } from "firebase-config/queryOptions";
import getFirestoreRef from "./getFirestoreRef";

const getQuery = (collection: string, options?: CollectionOptions) => {
  const collectionRef: CollectionReference = getFirestoreRef(collection);
  let q;
  if (options && options.queries) {
    const { queries } = options;
    queries.forEach(({ attribute, operator, value }) => {
      q = query(collectionRef, where(attribute, operator, value));
    });
  }

  if (options && options.sort) {
    const { attribute, order } = options.sort;
    q = query(collectionRef, orderBy(attribute, order));
  }

  if (options && options.limit) {
    q = query(collectionRef, limit(options.limit));
  }

  return q;
};

export default getQuery;

问题原因 #

Firestore v9采用模块化API，废弃了v8的链式调用模式，不能再用query.where().orderBy().limit()这种写法。你当前的v9代码每次都基于collectionRef重新创建查询，会覆盖之前的条件，而且没有正确叠加多查询规则，导致最终逻辑和原代码不符，同时触发了API调用错误。

正确的重构代码 #

import { CollectionReference, Query } from "@firebase/firestore-types";
import { limit, orderBy, query, where, QueryConstraint } from "firebase/firestore";

import { CollectionOptions } from "firebase-config/queryOptions";
import getFirestoreRef from "./getFirestoreRef";

const getQuery = (collection: string, options?: CollectionOptions) => {
  const collectionRef: CollectionReference = getFirestoreRef(collection);
  const constraints: QueryConstraint[] = [];

  // 收集所有where查询条件
  if (options?.queries) {
    options.queries.forEach(({ attribute, operator, value }) => {
      constraints.push(where(attribute, operator, value));
    });
  }

  // 添加排序规则
  if (options?.sort) {
    const { attribute, order } = options.sort;
    constraints.push(orderBy(attribute, order));
  }

  // 添加数量限制
  if (options?.limit) {
    constraints.push(limit(options.limit));
  }

  // 构建并返回最终查询：无约束则返回集合引用，否则传入所有约束
  return constraints.length > 0 ? query(collectionRef, ...constraints) : collectionRef;
};

export default getQuery;

关键改动说明 #

• 用QueryConstraint数组统一收集所有查询规则（过滤、排序、限制），最后通过扩展运算符一次性传入query()函数，完全适配v9的API规范。
• 多where条件不再被覆盖，所有过滤规则都会被加入查询。
• 用可选链?.简化条件判断，代码更简洁。
• 保持原逻辑：当没有任何查询选项时，直接返回集合引用。

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