Firebase Firestore Database duplicates data on UI while using AngularFire

I am having difficulty pinpointing the exact origin issue in my Angular 13.1 Project that uses @angular/fire 7.4.1 as its database.

The issue seems to apply to each screen that I am displaying data that comes from my Firestore Database , usually in the form of List screens. The arrays that populate the lists seem to overpopulate with multiple instances of the records that are currently stored in my Firestore Database

Below is a example of the Teams list , one of the screens that have the issue.

Note however that If I navigate to another route and then back to that screen, I am able to see the correct amount of data entries displayed.



I keep thinking that perhaps its an issue with initializing the application or something but I am scratching my head. I'm thinking that its something small and I hope it is. I have done previous project on Firestore Database using AngularFire.

The list above is populated like so from an ngOnInit() call :

private loadTeamsList(){
if(!this.currentUser.teams) return;

for(var i = 0;i < this.currentUser.teams.length; i++){

/*

Where this.currentUser.teams is the Firebastore document id of the team

*/

this.teamsService.getTeam(this.currentUser.teams).subscribe( team => {
this.teamsList.push(team);
})
}
}


The current record being read here is this , which contains only one teamId.

Which then leads to calling the Team Service function :

export class TeamService {

private endpointPrefix = '/teams'

constructor(private firebaseService: FirebaseService) { }

getTeam(teamId: string): Observable<Team>{
return this.firebaseService.getById(teamId,this.endpointPrefix);
}

...


Which leads to the main 'parent' service , the FirebaseService, where I try to generally make the majority of service calls.

@Injectable({
providedIn: 'root'
})

export class FirebaseService{

constructor(private firestore: Firestore){ }

...

getById(id: string | null,endpointPrefix: string): Observable<any>{
const ref = doc(this.firestore,endpointPrefix + `/${id}`);
return docData(ref, { idField: 'id' }) as Observable<any>;
}

getAll(endpointPrefix: string): Observable<any[]> {
const ref = collection(this.firestore, endpointPrefix);
return collectionData(ref, { idField: 'id' }) as Observable<any[]>;
}

get firestoreRef(){
return this.firestore;
}


I've tried the route of checking arrays within subscriptions using the includes() method as a way of preventing duplicates , but it would seem the array populates with duplicates regardless.

Am I missing something essential on the service level here? Or perhaps I'm not populating the array correctly. As mentioned earlier this happens on all screens where data is being read/retrieved from the database.

Continue reading...