He ejecutado mi aplicación perfectamente con

 "@angular/fire": "^6.1.5", "@angular/core": "~12.0.2"

y fue como

Servicio.ts

 getInboxCollection(userId: string) { return this.firestore.collection(`/user/${userId}/inbox/`).snapshotChanges().pipe( map( changes => { return changes.map( a => { const data: any = a.payload.doc.data(); data.id = a.payload.doc['id']; return data; }); }) ); }

componente.ts

 this.service.getInboxCollection(this.userId).subscribe((res: any) => { console.log(res); }

Ahora me he mudado a la última versión de AngularFire que es

 "@angular/fire": "^7.0.4",

Y nuevos cambios son

servicio.ts

 import { doc as fireDoc, docData, Firestore, docSnapshots } from '@angular/fire/firestore'; getInboxCollection(userId: string) { const refOfInbox = fireCollection(this.firestore, `/user/${userId}/inbox/`); return docSnapshots(fireDoc(refOfInbox)).pipe(map(res => { const data = res.data(); data['id'] = res.id; return data; })) }

componente.ts

 this.service.getInboxCollection(this.userId).subscribe((res: any) => { console.log(res); }

Pero me estoy quedando indefinido en la consola.
Según este documento oficial, los datos de docSnapshots están disponibles solo al acceder al documento de firebasse .
https://github.com/angular/angularfire/blob/master/docs/version-7-upgrade.md

Pero, ¿cómo obtener datos de las colecciones de Firebase usando docSnapshots u otro método con cambios en tiempo real?
Por favor, ayúdame con un mejor enfoque.
Gracias por adelantado.