I have created 3 tables in firebase console. Event, occurrence and venue. Now an event can have multiple occurrences, as occurrences are basically shows.

In occurrence document I have event set as reference and venue set as reference.

I query firebase through occurrence to get all the latest shows.

I want to build an array of javascript objects in react that will have id, date (comes from occurrence), title (comes from event) and address (comes from venue).

const [events, setEvents] = useState<any[]>([]);

useEffect(() => {
   const subscribe = firestore()
      .collection('occurrences')
      .onSnapshot(querySnapshot => {
        const showList: any[] = [];

        querySnapshot.forEach(documentSnapshot => {
          const { startDate, event, venue } = documentSnapshot.data();

          const show: any = {
            id: documentSnapshot.id,
            date: startDate,
          };

          event.onSnapshot(
            eventsDocSS => {
              show.title = eventsDocSS.get('name');
            },
            error => console.error('my error', error)
          );

          venue.onSnapshot(
            eventsDocSS => {
              show.address =
                eventsDocSS.get('addressLocality') + ', ' + eventsDocSS.get('addressRegion');
            },
            error => console.error('my error', error)
          );

          showList.push(show);
        });

        setEvents(showList);
      });

    return subscribe()
},[])

This code mind you does not work as I would need to run the event and venue snapshots async to make it work. But if I make it async I have cascade it all the way out at least to forEach loop, which does not work as subscribe cannot be async.

I am using @react-native-firebase/firestore but the code should not be that different in syntax.

How do I get setEvents populated with correct data?