Help understanding this error, and how to go about fixing it.

[molten bough]

I'm getting the following error when trying to assign the correct types for my application(screenshot at the end of the post)

This is coming from the following code:

this.catchesService.watchUserCatches('123').subscribe((catches: Catch[]) => {
            console.log(catches);
        });

Which is a returned observable from:

watchUserCatches(userId: string) {
        return this.firestore.collection('catches', ref => ref.where('uid', '==', userId)).valueChanges({ idField: 'doc_id' }).pipe(first());
    }

I know that what is going to be returned from Firebase is a list of documents that will have the type of Catch for each one (I am creating the documents so will know what is in them), but I don't fully understand what the error I am getting is and how to go about setting the correct type for them?

[errant loom]

Look at the documentation for angularfire (which, I guesss, is what you're using here): https://github.com/angular/angularfire/blob/master/docs/firestore/collections.md. See how they don't use .collection('items'), but instead .collection<Item>('items'). This generic type is what allows TypeScript to know that what is returned is an Observable<Item>.

[molten bough]

Legend, this worked instantly!

Got a quick side question sort of related to the above if you have a quick second?

I'm moving my subscription from my CatchesComponent to a CatchesService for better management of my data. What I'm thinking is this collection for a user is only going to be change by that user so could I do the following?

export class CatchesService {
    userCatches = new BehaviorSubject<Catch[] | null>(null);

    constructor(private firestore: AngularFirestore) { }

    // Did try to type the outcome but received errors - watchUserCatches(userId: string): Observable<Catch[]> { 
    watchUserCatches(userId: string) {
        return this.firestore.collection<Catch>('catches', ref => ref.where('uid', '==', userId)).valueChanges({ idField: 'doc_id' }).pipe(first()).subscribe((catches: Catch[]) => this.userCatches.next(catches));
    }

    addCatch(formValues: Catch) {
        return this.firestore.collection('catches').add(formValues);
    }

    deleteCatch() {
        // code for removing a document under the catches collection
    }
}

My idea is to grab the list once from firebase and then manage the list locally from here onwards since any updates to the collection will be by this user. That way I can minimise the number of reads within firebase? Does this sound like it would be a good idea?

[errant loom]

That won't work, since every call to watchUserCatches() will create a new subscription (without ever cancelling the previous one). And BTW, if the userId is always the same, then the method should take it as argument.
If you really want to share between multiple subscribers, you should probably use shareReplay() instead of using a BehaviorSubject.

[molten bough]

does the .pipe(first()) not end the subscription on first response?

I'm also passing in the userId into watchUserCatches?

[errant loom]

That's one thing I didn't notice but which makes me even more confused. Why would you name a method 'watchUserCatches' if all it does is return the catches as they are now and ignore all its future changes?

[molten bough]

I'm in the process of changing it over

It's because I had the idea of the behaviour subject whilst doing it and just forgot to rename. it's now called fetchUserCatches(userId: string)

[errant loom]

If you use pipe(first()), you're annihilating the really nice thing about firestore: i.e. you're automatically notified whenever something changes. I think you're overthinking this and making it ugly. Just return the valueChanges observable from the service.

[molten bough]

That's they idea i'm thinking about. For example say if I have 10 documents and set up my subscription thats 10 reads?

Then when I add a document which will only be by the user who I have fetched the list this would then be another 11 reads wouldn't it?

I'm trying to think of the best way to reduce reads whilst also managing my data.

My logic was, i've already read all the documents I need and stored them in a local list, why would I need to read them again when I already know what the update was locally?

[errant loom]

Well, with your code, if you add a document, nobody will see it since you've used pipe(first()). Start by making things correct. Then see if something needs to be optimized.

[molten bough]

Nobody else would need to see it as it is just pulling back a list for the current logged in user?
So the update would only be going to the current logged in user who made the change anyway?

I would have a separate method for the more what everyone else needs to see but at the moment the functionality is solely for the current logged in user and their data