类型“Observable<DocumentData[]>”不可分配

Question

我是 Angular 和 Firebase 的新手，我尝试使用 Angular/Fire 库的示例编写一个简单的程序：

import { Component } from '@angular/core';
import { Firestore, collectionData, collection } from '@angular/fire/firestore';
import { Observable } from 'rxjs';

interface Item {
  name: string
};

@Component({
  selector: 'app-root',
  template: `
  <ul>
    <li *ngFor="let item of item$ | async">
      {{ item.name }}
    </li>
  </ul>
  `
})
export class AppComponent {
  title = 'firetest2812';
  item$: Observable<Item[]>;
  constructor(firestore: Firestore) {
    const collect = collection(firestore, 'items');
    this.item$ = collectionData(collect);
  }
}

编译时出现以下错误：“错误：src/app/app.component.ts:24:5 - 错误 TS2322：类型“Observable<DocumentData[]>”不可分配给类型“Observable<Item[]>”。 ”

有人可以告诉我出了什么问题吗？谢谢！

Answer 1

我通过这样的转换解决了这个问题：

 this.item$ = collectionData(collect) as Observable<Item[]>

或者以一种好的方式

您可以使用AngularFirestore作为 firestore 类型而不是Firestore

你会得到这样的东西

import {Component} from '@angular/core';
import {Observable} from "rxjs";
import {AngularFirestore} from "@angular/fire/compat/firestore";


interface Item {
  name: string
}

@Component({
  selector: 'app-root',
  template: `
    <ul>
      <li *ngFor="let item of item$ | async">
        {{ item.name }}
      </li>
    </ul>
  `
})
export class AppComponent {
  title = 'firetest2812';
  item$: Observable<Item[]>;

  constructor(firestore: AngularFirestore) {
    this.item$ = firestore.collection<Item>("items").valueChanges();

  }
}

Answer 2

您必须将接口作为类型传递给函数collection。

 const collect = collection<Item>(firestore, 'items');