使用TypeScript构建Firestore条件查询时遇类型错误求助

错误原因 #

你遇到的类型错误本质是类型兼容性问题：

• app.collection(collection)返回的是CollectionReference类型，它是Query的子类，拥有id、parent、path等额外属性
• 调用orderBy后返回的是父类Query类型，TypeScript不允许将父类实例赋值给子类类型的变量，因此触发报错。

修复方案 #

显式将query变量的类型声明为Query，因为CollectionReference是Query的子类型，可以安全赋值给Query类型变量，后续orderBy返回的Query也能正常赋值。

修复后的代码示例：

// 确保ICollection接口定义正确
interface ICollection {
  collection: string;
  orderClause?: {
    value: string;
    direction: 'asc' | 'desc';
  };
}

// 声明泛型函数，T对应数据类型
const getInitialData = <T>(
  { collection, orderClause }: ICollection,
  dataResolver: (doc: FirebaseFirestore.DocumentSnapshot) => T,
  setData: (data: T[]) => void
) => {
  // 显式指定query的类型为Query
  let query: FirebaseFirestore.Query = app.collection(collection);

  if (orderClause) {
    query = query.orderBy(orderClause.value, orderClause.direction);
  }

  query.get().then((response) => {
    const genericData: T[] = [];
    response.forEach((doc) => {
      genericData.push(dataResolver(doc));
    });

    setData(genericData);
  });
};

额外说明 #

• 确保已正确导入Firebase Firestore的类型定义，比如通过import * as FirebaseFirestore from 'firebase/firestore'
• 泛型<T>用于约束数据类型，让genericData和setData的类型更严谨

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