Angular 17 SSR doesn't generate the static pages with any data when using Firebase

Question

I am creating a simple Quiz app using Angular 17 SSR (Not Angular Universal), and Firebase (via AngularFire 17) as the database, storage and host. Each quiz page is created from a single Quiz component which is generated by passing in the Doc_Id (e.g. example.com/quiz/einoe984h4)

The problem I am experiencing is that when I build my static pages using "ng b", the quiz pages that are dynamically created don't contain the data from the server.

I have seen some speculation that Angular's SSR engine doesn't seem to wait for the response from Firebase before rendering the page. This seems like a reasonable explanation, but I have no idea how to fix it?

Does anyone have a working example (all the info I can find on this is from older versions of firebase and Angular Universal, which is now an older version of SSR) that is using modern code?

Here is what I have. It works fine locally, but when I generate the static pages, the data is simply not there.

  import { Component, inject, OnInit } from '@angular/core';
  import { Firestore, getDoc, doc, DocumentSnapshot } from '@angular/fire/firestore';
  import { QuizData } from '../../interfaces/quiz-data';
  import { ActivatedRoute, Router } from '@angular/router';
  import { Meta } from '@angular/platform-browser';
  import { RouterModule } from "@angular/router";
  
  export class QuizComponent implements OnInit {

      private firestore: Firestore = inject(Firestore);
      documentID: string = '';
      
      constructor(private route: ActivatedRoute, private metaTagService: Meta, private router: Router) {}
      
      ngOnInit(): void {
    this.documentID = this.route.snapshot.paramMap.get('id')!;

    getDoc(doc(this.firestore, 'quizzes', this.documentID)).then((doc) => {
      // Set the quiz data
      this.quiz = doc.data() as QuizData;

      // Assign the first question to the current question
      this.currentQuestion = this.quiz.questions[0];

      // Update the meta tags
      this.metaTagService.updateTag({ property: 'og:title', content: this.quiz.topic + ' Quiz' });
      this.metaTagService.updateTag({ property: 'og:description', content: 'Think you know your ' + this.quiz.topic + ' trivia?' });
      this.metaTagService.updateTag({ property: 'og:url', content: "https://www.example.com/quiz/" + this.documentID });
      this.metaTagService.updateTag({ property: 'og:image', content: this.bgImage });
    });
   }
  }