Ionic AngularFirestoreCollection属性'id'不存在类型'QueryDocumentSnapshot<Todo>'

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 安装。我所要做的就是

1. npm install firebase
2. npm install @angular/fire
3. ng add @angular/fire
4. 运转 npm install 再次

而代码工作得很好。显然，一些问题导致package.json上的依赖关系不能正确更新。

从中找到了解决办法。1

Answer 1

你所使用的变量没有".id"，因为它的类型是'QueryDocumentSnapshot'。

如果你在编译时得到这个错误。

一个解决方案是修复包的依赖关系，并确保所有类型都符合预期。

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

另一个解决方案是通知你的linter编译器关于类型的差异。

下面的例子强制类型为'any'，它可以有'.payload.doc.id'。

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 安装。我所要做的就是

1. npm install firebase
2. npm install @angular/fire
3. ng add @angular/fire
4. 运转 npm install 再次

而代码工作得很好。显然，一些问题导致package.json上的依赖关系不能正确更新。

从中找到了解决办法。1