bring data of an attribute of type reference with angular?

good I am developing an application, which I have people and area in the person object I have an attribute that makes reference to the area that is registered:

and my angular person object I have it like this:

    import { area } from "./area";
import { actividad_persona } from "./actividad_persona";
import { DocumentReference } from "angularfire2/firestore";

export interface persona {
    id?: string
    nombre: string
    apellidos: string
    area: area
    areaRef?: DocumentReference;
    UserName: string
    password: string
    actividad_persona: actividad_persona[]
} 

and my service that brings all the data of the person except the area:

    import { Injectable } from '@angular/core';
import { persona } from '../modelos/persona';
import { AngularFirestoreCollection, AngularFirestore } from 'angularfire2/firestore';
import { map } from 'rxjs/operators';
import { Observable } from 'rxjs';
import { actividades } from '../modelos/actividades';
import { actividad_persona } from '../modelos/actividad_persona';
import { area } from '../modelos/area';

@Injectable({
  providedIn: 'root'
})
export class PersonaService {
  private personaCollection: AngularFirestoreCollection<persona>
  persona: persona
  constructor(private afs: AngularFirestore) {
    this.personaCollection = this.afs.collection<persona>('persona')
  }
  getPersonaFindId(idPersona: string): Observable<persona> {
    return this.afs.collection<persona>("persona").doc(idPersona).snapshotChanges().pipe(map(actions => {
      const id = actions.payload.id;
      const data = actions.payload.data() as persona;
      data.areaRef.onSnapshot(p=>{

      })

      console.log(data.areaRef.id)
      return { id, ...data };
    }))

How would you do to recover the data of the area? I'm using angular-firebase 2