Ionic 3中AngularFireDatabase查询报错及数据展示问题

第一个错误：ERROR TypeError: queryFn is not a function #

这个问题的核心是你参考的教程用的是**旧版AngularFire2（4.x及更早）**的API，而你当前安装的是AngularFire2 5.x+版本——两个版本的数据库查询API有重大差异：

• 旧版：list方法支持传入包含query键的配置对象来定义查询规则
• 新版（5.x+）：list方法的第二个参数要求是查询函数（而非对象），需要直接对数据库引用进行操作

你原来的代码：

this.games = this.afDatabase.list('/games/', { query: { orderByChild: user.uid } });

在新版API中会被判定为“第二个参数不是函数”，因此抛出queryFn is not a function错误。

第二个错误：Uncaught TypeError: Object(...) is not a function #

这个错误主要由两个原因导致：版本不兼容，以及查询逻辑错误，具体解决步骤如下：

1. 修复版本兼容问题 #

Ionic 3对应的是Angular 5，而较新的AngularFire2版本（5.1.x及以后）需要Angular 6+支持。请执行以下命令安装适配Ionic3的指定版本：

# 先卸载现有版本
npm uninstall angularfire2 firebase --save
# 安装兼容版本
npm install angularfire2@5.0.0-rc.10 firebase@5.0.4 --save

2. 修正查询逻辑错误 #

你写的ref => ref.orderByChild(user.uid)是错误的：orderByChild()的参数应该是数据库节点中用来过滤的字段名（比如每个游戏对象里存储用户ID的字段叫uid），而不是直接传用户ID。正确的写法是用orderByChild('字段名')搭配equalTo(用户ID)来精准过滤数据：

假设你的Firebase数据库结构如下：

games
├── gameId1
│   ├── uid: "用户的UID"
│   └── name: "游戏名称"
└── gameId2
    ├── uid: "用户的UID"
    └── name: "另一款游戏"

那么正确的查询代码应该是：

// 若定义了Game接口可保留<Game>，否则直接去掉
this.games = this.afDatabase.list<Game>('/games/', ref => 
  ref.orderByChild('uid').equalTo(user.uid)
).valueChanges();

3. 模板使用验证 #

你在模板中用async管道的写法是正确的，确保模板代码类似这样：

<ion-list>
  <ion-item *ngFor="let game of games | async">
    {{ game.name }}
  </ion-item>
</ion-list>

额外检查项 #

• 确认你已经在app.module.ts中正确初始化了AngularFire2，配置了AngularFireModule.initializeApp(firebaseConfig)和AngularFireDatabaseModule
• 测试阶段可以临时放宽Firebase数据库规则（设置为{ "rules": { ".read": true, ".write": true } }），确保当前用户能读取/games节点，上线后再调整为安全规则

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