Fetching values from other documents using document ID stored in a field in AngularFire5

Question

I have two collections: "vehicles" and "clients". In each vehicle, I'm registering the client via client's document Id. I need to access the client's title using the key I'm storing in the vehicle document and display it in the Material DataTable that shows a list of vehicles. However, I can't seem to be able to make it work and I'm pretty boggled with this.

The image below displays the table where I need to display the client title using another document. Rest of the values are being pulled from the vehicle's own document.

So far, I had unsuccessful attempts with switchMap and with flatMap (possibly due to lack of experience in using these operators). The only successful attempt was obtaining the client title via a nested observable query from the "vehicles" observable and it performs extremely bad. (Client titles disappear after sorting the table)

This is how I'm fetching the vehicles observable:

    this.vehicles$ = this.afs.collection<IVehicle>(`vehicles`);
    this.vehicles = this.vehicles$.snapshotChanges().pipe(
  map(actions => {
    return actions.map(a => {
      const data = a.payload.doc.data() as IVehicle;
      const $key = a.payload.doc.id;
      return { $key, ...data };
    });
  })
);

This is how I was able to fetch the titles (malfunctions in sort table event - titles disappear for some reason)

    this.vehicles = this.vehicles$.snapshotChanges().pipe(
  map(actions => {
    return actions.map(a => {
      const data = a.payload.doc.data() as IVehicle;
      const $key = a.payload.doc.id;
      const client = data.client;
      const clientTitle = this.afs
        .doc(`clients/${client}`)
        .snapshotChanges()
        .pipe(
          map(foo => {
            const dataFoo = foo.payload.data() as IClient;
            let titleString = dataFoo.title;
            if (client) {
              return { titleString, ...dataFoo };
            } else {
              titleString = 'N/A';
              return { titleString, ...dataFoo };
            }
          })
        );
      return { clientTitle, $key, ...data };
    });
  })
);

I must be doing something wrong while trying to use switchMap, as I can't seem to get the document Id from the vehicle document, even though the vehicle interface includes a "client" field. (see the image below) That's why I didn't complete that snippet to return granular values to append onto the "vehicle" observable.

I just can't seem to catch what am I doing wrong, I would appreciate any direction that shows a "correct" way to approach these types of queries.