I have this code, I ‘m using Angular 18 :

 getData(){
    const collectionInstance = collection(this.firestore, 'photos');
    this.photoData = collectionData(collectionInstance, { idField: 'id' }).pipe(
      map(dataArray => dataArray.map(data => ({
        id: data['id'],
        title: data['title'],
        description: data['description'],
        imageUrl: data['imageUrl'],
        likes: data['likes']
  }) as Photo))
    );
 }

The problems are dataArray and data after map, when I compile I have some messages errors:

X [ERROR] TS18046: ‘dataArray’ is of type ‘unknown’. [plugin angular-compiler]

src/app/pages/gallery/gallery.component.ts:29:23:
  29 │       map(dataArray => dataArray.map(data => ({

and

X [ERROR] TS18046: ‘data’ is of type ‘any’. [plugin angular-compiler]

src/app/pages/gallery/gallery.component.ts:29:23:
  29 │       map(dataArray => dataArray.map(data => ({

I’v tried these options:

async getData() {
  const collectionInstance = collection(this.firestore, 'photos');
  const snapshot = await getDocs(collectionInstance);
  this.photoData = snapshot.docs.map(doc => ({
    id: doc.id,
    ...doc.data()
  }) as Photo);
}

Errors:

problem with it, is :
this.photoData the type ‘Photo[]’ doesn’t have the following type ‘Observable<Photo[]>’: source, operator, lift, subscribe et de 2 others.ts(2740)