Angular+Firebase图片检索报错：{ query: {}; }不兼容QueryFn类型

这个错误的核心原因是你误用了AngularFireStorage的查询API——新版本的AngularFire要求查询参数是一个QueryFn类型的函数，而不是包含query属性的对象，这和旧版本的API写法有明显区别。

错误写法示例（你当前可能的代码） #

大概率是类似下面的代码触发了报错：

// 错误：{ query: {} } 不符合QueryFn类型约束
this.storage.list('images', { query: { /* 你的查询条件 */ } });

正确的写法 #

你需要把查询逻辑包装成一个函数，传入给list（或get等方法），这个函数会接收一个Reference对象，你可以通过它来构建具体的查询规则：

import { AngularFireStorage, AngularFireStorageReference } from '@angular/fire/compat/storage';

// 在你的service.ts中实现图片检索
getImages() {
  return this.storage.list('images', (ref: AngularFireStorageReference) => {
    // 在这里添加你的查询条件，比如按名称排序、限制返回数量等
    return ref.orderBy('name').limitToLast(10);
  }).valueChanges();
}

错误原因解析 #

QueryFn的类型定义是一个接收存储引用并返回查询对象的函数，具体类型声明如下：

type QueryFn = (ref: AngularFireStorageReference) => AngularFireStorageReference;

而你传入的{ query: {} }是一个普通对象，完全不符合这个函数类型的要求，因此TypeScript会抛出类型不匹配的错误。

如果你的需求只是简单获取某个路径下的所有图片，不需要额外查询条件，甚至可以省略第二个参数：

// 无查询条件时的简化写法
getImages() {
  return this.storage.list('images').valueChanges();
}

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