Angular中Firestore数据转自定义类型失败，求助转换器的正确使用方法

看起来你已经走对了第一步——定义了类型转换器，但问题出在没有正确处理Firestore返回的快照对象，直接返回了getDocs/getDoc的结果，而不是从中提取转换后的Song数据。我来帮你修正代码并解释清楚：

1. 先确认转换器的正确性（可选优化） #

你的转换器定义本身是可用的，不过可以给fromFirestore的参数标注更通用的DocumentSnapshot类型（QueryDocumentSnapshot是它的子类，这样兼容性更好）：

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

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

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

2. 修正Service中的方法 #

getDocs返回的是QuerySnapshot<Song>（包含多个文档快照的集合），getDoc返回的是DocumentSnapshot<Song>（单个文档快照），你需要从这些快照中提取实际的Song数据：

方式一：使用Promise链式调用

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

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

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

  getSongs(): Promise<Song[]> {
    // 关联转换器到集合引用
    const songsCollection = collection(this.firestore, 'songs').withConverter(songConverter);
    // 先获取快照，再映射出每个文档的数据
    return getDocs(songsCollection).then((querySnapshot: QuerySnapshot<Song>) => {
      return querySnapshot.docs.map(doc => doc.data());
    });
  }

  getSong(id: string): Promise<Song> {
    // 关联转换器到文档引用
    const songDoc = doc(this.firestore, 'songs', id).withConverter(songConverter);
    return getDoc(songDoc).then((docSnapshot: DocumentSnapshot<Song>) => {
      // 处理文档不存在的情况，避免返回undefined
      if (!docSnapshot.exists()) {
        throw new Error(`ID为${id}的歌曲不存在`);
      }
      // 因为用了转换器，data()会返回Song类型，非空断言确保类型安全
      return docSnapshot.data()!;
    });
  }
}

方式二：使用async/await（更易读）

Angular中更推荐这种写法，代码逻辑更清晰：

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);

  async getSongs(): Promise<Song[]> {
    const songsCollection = collection(this.firestore, 'songs').withConverter(songConverter);
    const querySnapshot = await getDocs(songsCollection);
    return querySnapshot.docs.map(doc => doc.data());
  }

  async getSong(id: string): Promise<Song> {
    const songDoc = doc(this.firestore, 'songs', id).withConverter(songConverter);
    const docSnapshot = await getDoc(songDoc);
    
    if (!docSnapshot.exists()) {
      throw new Error(`ID为${id}的歌曲不存在`);
    }
    
    return docSnapshot.data()!;
  }
}

关键说明 #

• 调用withConverter(songConverter)后，Firestore会自动帮你把数据库中的原始数据转换成Song类型，也会把你要写入的Song对象转成Firestore支持的格式。
• 必须从快照对象（QuerySnapshot/DocumentSnapshot）中调用data()方法才能拿到转换后的Song数据，直接返回快照是不行的。
• 处理单个文档时，一定要检查exists()，避免因文档不存在返回undefined，导致后续类型报错。

备注：内容来源于stack exchange，提问作者Harris6144