Doesn't pre-render angular universal parent content, when using firestore query

Question

I have a page that is using angular 9 and in order to handle seo, the universal angular library was added, all the static content of the page, it pre-renders very well, but there are some parts of the page in the that the content is requested to be brought in a firestore query, and the pages that are like this, will only pre-render the headers and the footer of the page, but the text that goes as the main content that is brought from firestore, will not pre-render it renderea, I've already been consulting several guides, apparently nothing wrong is being done, I don't know if they can help me solve the situation, here I put an example of my code. It should be noted that this only happens in the pre-rendering, since in the client, that is, the browser, all the text is shown

component.custom.html:

<div class="ic-subtitle" *ngFor="let text of data; let i = index">
    <p class="text">{{ text?.name }}</p>
    <p class="text1">{{ text?.text1 }}</p>
    <p class="text1">{{ text?.text2 }}</p>
    <p class="text1">{{ text?.text3 }}</p>
    <p class="text1">{{ text?.text4 }}</p>
</div>

component.custom.ts

import { Component, OnInit } from '@angular/core';
import { ServiceComponent } from './services/service.component';
@Component({
  selector: 'app',
  templateUrl: './component.custom.html',
  styleUrls: ['./component.custom.scss']
})
export class ComponentCustom implements OnInit {
  public data: any[] = [];
  public texts: any[] = [];
  constructor(
    private consul: ServiceComponent
  ) { }
  ngOnInit(): void {
    this.getData();
  }
  public async getData(): Promise<any> {
    try {
      const res = await this.consul.getService();
      for (const el in res) {
        this.texts = [];
        if (Object.prototype.hasOwnProperty.call(res, el)) {
          if (res[el] !== 'terms' && res[el] !== 'Text of service') {
          const element = res[el];
          this.data.push(element);
        }
       }
     }
     Object.assign(this.data, {title: res?.title || ""})
     } catch (error) {
       alert(error);
     }
    }
}

service.component.ts

import { Injectable } from '@angular/core';
import { AngularFirestore } from '@angular/fire/firestore';
import { map } from 'rxjs/operators';

@Injectable({
 providedIn: 'root' 
})
export class ServiceComponent {

constructor(
  private fb: AngularFirestore
) { }

}
public getService(): Promise<any> {
  return this.fb.collection('bd_firestore').doc('sdfghdjh335').get().pipe(
    map(data => {
      const el = data.data();
      return el;
    })
  ).toPromise();
 }
}