Firebase实时数据库报错TypeError: block.getDepartment is not a function求助

报错信息 #

Error:

core.mjs:10132 ERROR TypeError: block.getDepartment is not a function
    at FirebaseService.mapDatabaseToBlock (firebase.service.ts:54:30)
    at firebase.service.ts:45:60
    at Array.map (<anonymous>)
    at firebase.service.ts:45:42
    at map.js:7:37
    at OperatorSubscriber._next (OperatorSubscriber.js:13:21)
    at OperatorSubscriber.next (Subscriber.js:31:18)
    at SafeSubscriber.__tryOrUnsub (Subscriber.js:183:16)
    at SafeSubscriber.next (Subscriber.js:122:22)
    at Subscriber._next (Subscriber.js:72:26)

相关代码 #

firebase-service.ts #

retrieveAllBlocks() {
    const blocksRef: AngularFireList<any> = this.db.list('blocks');
    this.blocksData = blocksRef.valueChanges().pipe(
      map((blocks: any[]) => {
        const transformedBlocks = blocks.map(block => this.mapDatabaseToBlock(block)); //<-----
        this._blocks = transformedBlocks;
        return transformedBlocks;
      })
    );

  }

mapDatabaseToBlock(block: Block): Block {
    const department = block.getDepartment(); //<------ ERROR
    const reorderedData = {
      department: block.department,
      description: department.description,
      hash: block.hash,
      id: department.id,
      message: block.message,
    };

block.ts #

getDepartment(): Department {
    return this.department;
  }

原因分析 #

从Firebase实时数据库通过valueChanges()获取的数据是普通JSON对象，并非你定义的Block类实例。JSON对象仅包含数据字段，没有Block类的方法（如getDepartment()），因此调用该方法时会触发“不是函数”的错误。

你在mapDatabaseToBlock方法中把参数类型声明为Block，这只是TypeScript的类型标注，不会自动将JSON对象转换为Block实例。

解决办法 #

方法1：直接访问JSON对象字段 #

既然从数据库拿到的是普通对象，直接读取department字段即可，无需调用类方法：

mapDatabaseToBlock(block: any): Block {
    const reorderedData = {
      department: block.department,
      description: block.department.description,
      hash: block.hash,
      id: block.department.id,
      message: block.message,
    };
    // 若需返回Block实例，用构造函数包装
    return new Block(reorderedData);
}

方法2：将JSON对象转换为Block类实例 #

在Block类中添加静态工厂方法或修改构造函数，把JSON对象转换为Block实例，即可正常调用类方法：

1. 修改block.ts，添加构造函数支持初始化

export class Block {
  department: Department;
  hash: string;
  message: string;
  // 其他字段...

  // 构造函数支持传入JSON对象初始化
  constructor(data?: Partial<Block>) {
    if (data) {
      Object.assign(this, data);
      // 若department也是类实例，需同步转换
      this.department = new Department(data.department);
    }
  }

  getDepartment(): Department {
    return this.department;
  }
}

2. 在mapDatabaseToBlock中创建Block实例

mapDatabaseToBlock(blockData: any): Block {
    // 先将JSON对象转换为Block实例
    const block = new Block(blockData);
    const department = block.getDepartment(); // 现在可正常调用方法
    const reorderedData = {
      department: block.department,
      description: department.description,
      hash: block.hash,
      id: department.id,
      message: block.message,
    };
    return new Block(reorderedData);
}

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