I’m trying to convert data from Firestore into a type in Angular. Though I’m struggling on how to use a converter.

This is my model:

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
}

And this is my service:

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

The errors I receive are:

Type ‘Promise<DocumentSnapshot<Song, Song>>’ is not assignable to type ‘Promise’.
Type ‘DocumentSnapshot<Song, Song>’ is missing the following properties from type ‘Song’: title, lyrics

and:

Type ‘Promise<QuerySnapshot<Song, Song>>’ is not assignable to type ‘Promise<Song[]>’.
Type ‘QuerySnapshot<Song, Song>’ is missing the following properties from type ‘Song[]’: length, pop, push, concat, and 28 more.

Where am I going wrong?