'Maximum call stack size exceeded on Return' conflict with 'Subscribe does not exist on type void'

Question

I fixed the "subscribe does not exist on type void" by adding return on my get function on the firestore service. However, another problem came up which is "Maximum call stack size exceeded on Return".

I tried to fix either of them but resulting in another issue

firestore.service.ts

public getRoom() {
    this.rooms = this.afs
      .collection('Room')
      .snapshotChanges()
      .pipe(
        map(changes => {
          return changes.map(a => {
            const data = a.payload.doc.data() as Room;
            data.id = a.payload.doc.id;
            return data;
          });
        })
      );

//Maximum call stack size exceeded when i added return here
    return this.getRoom().map(response => response.json());
  }

component.ts

  ngOnInit() {
//subscribe does not exist on type void came up when no return on get
    this.firestore.getRoom().subscribe((room: Room[]) => {
      this.arr = room;
      console.log(this.arr);
    });
  }

Answer 1

The issue with recursive call of getRoom() function. You are calling getRoom() within getRoom();

Remove the self calling line as -

public getRoom() {
    return this.rooms = this.afs
      .collection('Room')
      .snapshotChanges()
      .pipe(
        map(changes => {
          return changes.map(a => {
            const data = a.payload.doc.data() as Room;
            data.id = a.payload.doc.id;
            return data;
          });
        })
      );

   //Maximum call stack size exceeded when i added return here
   //return this.getRoom().map(response => response.json());
  }