Angular Firestore Retrieving Data Issue

I have set up a Cloud Firestore for my Angular app. I want the store to hold all of my citations, which are objects. My database setup on Firestore is: users/{userID}/citations. I am able to successfully add citations as shown in the code below, but I want to be able to access the existing citations so that when the page loads it pulls the existing citations from Firestore.

I tried using console.log to access the user's citations, but I just get a complex object in the console when it is called.

user$: Observable<User>;
  userId: string;

  constructor(
      private afAuth: AngularFireAuth,
      private afs: AngularFirestore,
      private router: Router
  ) {
    this.user$ = this.afAuth.authState.pipe(
      switchMap(user => {
          // Logged in
        if (user) {
          this.userId = user.uid;
          return this.afs.doc<User>(`users/${user.uid}`).valueChanges();
        } else {
          // Logged out
          return of(null);
        }
      })
    )
  }

addCitation(citation, date, type, note) {
    const userRef = this.afs.collection(`users/${this.userId}/citations`);
    userRef.add({
      'citation': citation,
      'data': date,
      'type': type,
      'note': note
    })
    console.log(this.afs.collection(`users/${this.userId}/citations`))
  }