null is not an object (evaluating 'snapshot.forEach')

Question

I'm trying to subscribe to a query on firestore but I'm getting an error when I add a filter.

this works just fine

  useEffect(() => {
    if (dbChats && currentUser?.uid) {
      const unsubscribe = dbChats
        .orderBy('createdAt')
        .limit(100)
        .onSnapshot((querySnapshot) => {
          const chats = firebaseLooper(querySnapshot);

          setChats(chats);
        });
      return unsubscribe;
    }
  }, [dbChats]);

but this doesn't

  useEffect(() => {
    if (dbChats && currentUser?.uid) {
      const unsubscribe = dbChats
        .where('participants', 'array-contains', currentUser.uid)
        .orderBy('createdAt')
        .limit(100)
        .onSnapshot((querySnapshot) => {
          const chats = firebaseLooper(querySnapshot);

          setChats(chats);
        });
      return unsubscribe;
    }
  }, [dbChats]);

whenever I add where('participants', 'array-contains', currentUser.uid)

It throws the error

null is not an object (evaluating 'snapshot.forEach')

Note that this also works

dbChats.where('participants', 'array-contains', currentUser.uid).get()

Answer 1

The snapshot is null because you haven't supplied any error handling and the query is throwing an error. Simply supply an error handler as a second param to onSnapshot.