How to fetch data from cloud firestore to an ion-list angular 9 /ionic 5

Question

Can someone help me fetch data from cloud firestore to a ion-list? I use the cloud firestore modular SDK, angular 9 and ionic 5.

my collection on cloud firebase : clients

my interface src/app/models/client/client.ts :

export    interface client{
    
    name: string;
    phone: number;
    mensualite: number;
    zone: string;
    localisation: string;
    imp: number;
    net: number;
    abonnement: number;
  };

Here is my src/app/tab1/tab1.page.html, where I have an ion-list:

<ion-header [translucent]="true">
  <ion-toolbar lines="none" color="danger">
    <ion-title >
      GESCABLE
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-fab vertical="bottom" horizontal="end" slot="fixed">
    <ion-fab-button routerLink="/newclient">
      <ion-icon  name="add"></ion-icon>
    </ion-fab-button>
  </ion-fab>

  <ion-list>
    <ion-item *ngFor="let client of clientList" lines="none" button (click)='openClient()' >
      <ion-avatar slot="start">
        <img src="{{client.localisation}}" />
      </ion-avatar>
      <ion-label class="ion-text-wrap">
        <div class="line2">
          <h3><b>{{client.name}}</b></h3>
          <p>Imp: {{client.imp}} FCFA</p>
        </div>
        <div class="line2">
          <p>Zone A | Mens {{client.mensualite}} FCFA</p>
          <p><b>Net: {{client.net}} FCFA</b></p>
        </div>
      </ion-label>
    </ion-item>
  </ion-list>
</ion-content> 

Here is my src/app/tab1/tab1.page.ts file where the error is displayed:

import { Component, NgZone } from '@angular/core';
import { ClientPage } from '../client/client.page';
import { NewclientPage } from '../newclient/newclient.page';
import { client } from '../models/client';
import { AlertController, NavController } from '@ionic/angular';

import { getApp } from '@firebase/app';
import { getFirestore, collection, query, where, onSnapshot } from "firebase/firestore";

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss']
})
export class Tab1Page {
  
  constructor(private navCtrl: NavController, private alertCtrl:AlertController) {}
  public search: string;
  public clientList: client[]:[];
  ngOnInit(){
    const firebaseApp=getApp();
    const db=getFirestore(firebaseApp);
    const q = query(collection(db,'clients')); 
    
    const unsubscribe = onSnapshot(q,(querySnapshot)=>{
      querySnapshot.forEach((doc)=>{
        this.clientList.push(doc.data());
        console.log(doc.id, " => ", doc.data());
      });
    });
  }
  
  openClient(){
    this.navCtrl.navigateForward("/client")
  }
  newClient(){
    this.navCtrl.navigateForward("/newclient")
  }
} 

Documents stored in firestore are correctly displayed in the inspector, but data are not displayed in the ion-list. Here is the error message displayed:

Uncaught TypeError: Cannot read properties of undefined (reading 'push') ```

Answer 1

Looks like you have a typo in this line -

public clientList: client[]:[];

Change it to -

public clientList: client[] = [];