使用AngularFire2从Firestore读取数据时触发严格模式类型错误

嘿，这个错误我之前在项目里也踩过坑！先帮你理清楚：你能成功写入数据，说明Firestore的权限和基础连接是没问题的，这个严格模式的报错大概率是代码写法或者版本兼容导致的。

错误原因拆解 #

这个TypeError是因为严格模式下JavaScript禁止访问函数的caller、callee和arguments属性，而你的数据获取逻辑（或者依赖的AngularFire2版本）刚好触发了这个限制。常见场景包括：

• 你在订阅数据的回调里用了arguments对象或者arguments.callee这类写法
• AngularFire2和Firebase版本不兼容，旧版本库内部可能用到了这些被严格模式禁用的属性
• 你的代码里混入了非严格模式的函数，和Angular的严格模式环境冲突

具体解决方案 #

1. 修正代码中的严格模式违规写法
   先检查你获取数据的代码（比如subscribe或map操作里）有没有类似下面的错误写法：

   // ❌ 错误示例：使用了arguments
   this.clientsCollection.valueChanges().subscribe(function() {
     console.log(arguments); // 严格模式下禁止访问
   });
   

   改成箭头函数或者用剩余参数替代arguments：

   // ✅ 正确示例：用箭头函数直接接收参数
   this.clientsCollection.valueChanges().subscribe((logs) => {
     console.log(logs);
   });
   
   // 如果需要处理多参数，用剩余参数语法
   this.clientsCollection.snapshotChanges().subscribe((...args) => {
     console.log(args);
   });
   

2. 确保AngularFire2与Firebase版本兼容
   不同版本的AngularFire2和Firebase可能存在严格模式适配问题，建议先确认版本匹配关系，再更新到稳定兼容的版本：

   • 先卸载现有依赖：

     npm uninstall angularfire2 firebase
     

   • 安装匹配的稳定版（比如当前常用的组合）：

     npm install @angular/fire firebase@9.23.0
     

   （注：如果是旧版AngularFire2，对应Firebase版本也要匹配，比如AngularFire2 5.x对应Firebase 5.x）

3. 排查自定义管道/指令或第三方依赖
   如果你的数据逻辑用到了自定义管道、指令或者第三方库，检查这些代码里有没有访问caller、callee或arguments的情况，把这些写法替换成严格模式兼容的方式。

4. 通过错误堆栈定位问题代码
   在浏览器控制台展开错误的堆栈信息，找到触发错误的具体文件和行号——如果是AngularFire2内部的问题，可以去GitHub仓库查看是否有已修复的issue，或者提交新的反馈。

完整的正确获取数据示例 #

import { Component, OnInit, OnDestroy } from '@angular/core';
import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/firestore';
import { UserLogs } from './your-userlogs-interface';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-client-logs',
  templateUrl: './client-logs.component.html'
})
export class ClientLogsComponent implements OnInit, OnDestroy {
  private clientsCollection: AngularFirestoreCollection<UserLogs>;
  private clientSubscription: Subscription;
  userLogs: UserLogs[] = [];

  constructor(private afs: AngularFirestore) { }

  ngOnInit(): void {
    this.clientsCollection = this.afs.collection<UserLogs>('userLogs');
    // 使用valueChanges()获取数据，订阅时用箭头函数避免严格模式冲突
    this.clientSubscription = this.clientsCollection.valueChanges().subscribe(logs => {
      this.userLogs = logs;
      console.log('获取到的日志数据:', logs);
    });
  }

  ngOnDestroy(): void {
    // 销毁订阅避免内存泄漏
    if (this.clientSubscription) {
      this.clientSubscription.unsubscribe();
    }
  }
}

按照上面的步骤排查修改，应该就能解决这个严格模式的报错啦！

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