无法从 Angular 中的 Firestore 转换为类型

Question

我正在尝试将 Firestore 中的数据转换为 Angular 中的类型。虽然我在如何使用转换器方面遇到了困难。

这是我的模型：

import { QueryDocumentSnapshot } from "@angular/fire/firestore";

export interface Song {
  title: string;
  lyrics: string;
}

export const songConverter = {
  toFirestore: (data: Song) => data,
  fromFirestore: (snapshot: QueryDocumentSnapshot) => snapshot.data() as Song
}

这就是我的服务：

import { Injectable, inject } from '@angular/core';
import { Firestore, collection, doc, getDoc, getDocs } from '@angular/fire/firestore';

import { Song, songConverter } from './song.model';

@Injectable({
  providedIn: 'root'
})
export class SongService {
  firestore: Firestore = inject(Firestore);

  getSongs(): Promise<Song[]> {
    return getDocs(collection(this.firestore, 'songs').withConverter(songConverter));
  }

  getSong(id: string): Promise<Song> {
    return getDoc(doc(this.firestore, 'songs', id).withConverter(songConverter));
  }
}

我收到的错误是：

类型“Promise>”不可分配给类型“Promise”。 类型“DocumentSnapshot”缺少“歌曲”类型中的以下属性：标题、歌词

和：

类型“Promise>”不可分配给类型“Promise”。 类型“QuerySnapshot”缺少类型“Song[]”中的以下属性：长度、弹出、推送、连接以及其他 28 个属性。

我哪里出错了？

Answer 1

您想要的代码看起来像这样。我会使用

map

从

Song

中的每个

DocumentSnapshot

中提取

QuerySnapshot

对象。

function getSongs(): Promise<Song[]> {
  return getDocs(collection(this.firestore, 'songs').withConverter(songConverter))
    .then((querySnap: QuerySnapshot<Song>) => {
      return querySnap.docs.map((docSnap: DocumentSnapshot<Song>) => docSnap.data());
    })
}