How to get a typed object with angularfire 7+ (firebase 9)

I recently started to use the "new" modular approach of angular and angularfire.

I'm trying to retrieve a document from a collection.

Currently I've this:

  constructor(private firestore: Firestore, private auth: Auth) {
    const userId = this.auth.currentUser?.uid;
    const docReference = doc(this.firestore, 'queues/' + userId);
    this.myQueue$ = docData(docReference);
  }

My goal is to have myQueue$ typed like this:

  public readonly myQueue$: Observable<Queue | null>;

But I'm not really sure how?

I tried to do the following:

const docReference = doc<Queue>(this.firestore, 'queues/' + userId);
this.myQueue$ = docData<Queue>(docReference);

but it doesn't work because this.firestore isn't a CollectionReference<Queue>(which seems normal since its the whole firestore database).

This modular is a bit a pain, most of the doc still refer to the "old" approach: https://github.com/angular/angularfire/tree/master/docs/firestore.

So how can I work with typed objects?

from How to get a typed object with angularfire 7+ (firebase 9)