Question

我对Ionic并不陌生，我正在尝试连接到Firebase数据库，同时编写了snapshotChange()。我碰到一个错误。

Property 'id' does not exist on type 'QueryDocumentSnapshot<Todo>'.

代码在下面，

export interface Todo {
  id?: string;
  task: string;
  priority: number;
  createdAt: number;
}


export class TodoPage implements OnInit {
  private todosCollection: AngularFirestoreCollection<Todo>;

  private todos: Observable<Todo[]>;

  constructor(db: AngularFirestore) {
    this.todosCollection = db.collection<Todo>("todos");

    this.todos = this.todosCollection.snapshotChanges().pipe(
      map((actions) => {
        return actions.map((a) => {
          const data = a.payload.doc.data();
          const id = a.payload.doc.id;        //the error is here at the a.payload.doc."id"
          return { id, ...data };
        });
      })
    );
  }

任何帮助将不胜感激。谢谢！

编辑：解决方案

我终于可以正常工作了，事实证明@angular/fire安装存在一些问题。我要做的就是

npm install firebase
npm install @angular/fire
ng add @angular/fire
最后再次运行npm install

代码运行正常。显然，某些问题导致对package.json的依赖关系无法正确更新。

找到了以下解决方案：1

Answer 1

您使用的变量没有“ .id”，因为其类型为“ QueryDocumentSnapshot”。

如果您在编译时遇到此错误；

一种解决方案是修复程序包/依赖项，并确保所有类型均符合预期。

npm install firebase @angular/fire
ng add @angular/fire

另一种解决方案是通知linter /编译器有关类型差异的信息。

以下示例将类型强制为可以具有“ .payload.doc.id”的“ any”。

this.todosCollection = db.collection<Todo>("todos");

this.todos = this.todosCollection.snapshotChanges().pipe(
  map((actions) => {
    return actions.map((a: any) => {
      const data = a.payload.doc.data();
      const id = a.payload.doc.id;
      return { id, ...data };
    });
  })
);

如果在运行时遇到此错误，则需要首先修复编译错误，然后确保存在'.id'属性。

Answer 2

我要在此处添加问题发布者找到的解决方案：

我终于可以正常工作了，事实证明@angular/fire安装存在一些问题。我要做的就是

npm install firebase
npm install @angular/fire
ng add @angular/fire
最后再次运行npm install

代码运行正常。显然，某些问题导致对package.json的依赖关系无法正确更新。

找到了以下解决方案：1

离子AngularFirestoreCollection属性'id'不存在，类型为'QueryDocumentSnapshot <Todo>'

2 个答案: