Firebase数据库查询子节点返回大量重复对象问题咨询

首先，咱们先拆解下你遇到的问题：数据库只有2个用户，却输出大量相同的用户对象，核心原因大概率是你的findById查询被重复执行了多次，而不是一次查询返回了重复数据。

为什么会重复执行？ #

Angular的生命周期钩子和模板表达式有特定的执行时机，如果你把this.usersService.findById(value)放在了以下场景中，就会导致频繁调用：

• 模板中的插值表达式（比如{{ usersService.findById(someId) }}）：Angular的变更检测会频繁执行这些表达式，每次检测都会触发一次查询。
• ngDoCheck、ngOnChanges这类会高频触发的生命周期钩子：这些钩子在组件变更时会多次执行，如果查询放在这里，自然会重复调用。
• 某些订阅的回调中，而这个订阅会频繁触发（比如一个每秒更新的Observable）。

你可以在findById方法里加一行日志验证：

findById(id: string): Promise<any> {
  console.log(`findById called with id: ${id}`); // 加这行日志验证调用次数
  return this.db.list('/users').$ref.orderByChild('id').equalTo(id).once('value');
}

运行后看控制台，如果这条日志出现很多次，就坐实了是重复调用的问题。

对大数据量场景的性能影响？ #

肯定会有明显影响，而且还不小：

• 带宽消耗：每次查询都要和Firebase数据库建立请求、传输数据，频繁调用会浪费大量带宽，尤其是用户在移动网络下体验会很差。
• 客户端性能：多次解析返回的快照、执行forEach和日志输出，会增加浏览器的CPU和内存占用，严重时会导致页面卡顿、响应变慢。
• 数据库配额：Firebase有查询次数的配额限制，频繁重复查询可能会触发配额告警甚至限制，影响服务可用性。

怎么解决？ #

1. 控制查询执行时机：把查询放在只会执行一次的地方，比如ngOnInit钩子中，或者通过按钮点击等用户交互触发：

ngOnInit() {
  // 只在组件初始化时执行一次查询
  this.usersService.findById(value)
    .then(snap => {
      snap.forEach(e => { console.log(e.val()); });
    }).catch(err => { console.log(err) });
}

2. 缓存查询结果：如果需要多次使用同一个id的查询结果，可以把结果缓存起来，避免重复请求：

// 在UsersService中添加缓存逻辑
private userCache = new Map<string, any>();

findById(id: string): Promise<any> {
  if (this.userCache.has(id)) {
    return Promise.resolve(this.userCache.get(id));
  }
  return this.db.list('/users').$ref.orderByChild('id').equalTo(id).once('value')
    .then(snap => {
      const userData = snap.val();
      this.userCache.set(id, userData);
      return userData;
    });
}

3. 优化查询方式（可选）：如果你的用户节点的key就是用户id，其实可以直接用this.db.object('/users/' + id).once('value')来查询，这样更高效，也避免了orderByChild的额外开销。

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