How to collect data from Firestore in TypeScript

So I'm working on a small chat project in Angular. And so far I have had problems with using Firestore. Especially with the typescript that I'm learning now.

In app.module.ts, I am initializing the app with

in app.module.ts I am initializing app with

    import { provideFirebaseApp, getApp, initializeApp } from '@angular/fire/app';
    import { getFirestore, provideFirestore } from '@angular/fire/firestore'
    
imports: [
    provideFirebaseApp(() => initializeApp(environment.firebase)),
    provideFirestore(() => getFirestore()),
],

Then I made FirestoreService to retrieve and update data.

Methods for updating arrays in my documents work fine, but I can't get data from firestore; it always returns undefine and nothing is returned.

import { AngularFireAuth } from '@angular/fire/compat/auth';
import {
  Firestore,
  getFirestore,
  provideFirestore,
  collectionData,
  collection,
  doc,
  getDoc,
  docData,
  query,
  setDoc,
  updateDoc,
  addDoc,
  firestoreInstance$,
  DocumentData,
  arrayRemove,
} from '@angular/fire/firestore';
// import { Observable } from '@firebase/util';
import { ProfileUser } from '../model/profile-user';
import { AngularFirestore } from '@angular/fire/compat/firestore';
import { from, of, switchMap, Observable } from 'rxjs';
import { arrayUnion } from '@firebase/firestore';


constructor(
    private firestore: Firestore,
    private aF: AngularFirestore // twis was added while I was testing other approach found on google
    
  ) { }

async rejectFriendRequest(rejectedUser: string, currentUser: string){
    const recipientRef = doc(this.firestore, "users", JSON.stringify(currentUser));

    await updateDoc(recipientRef, {
      invitationsFrom: arrayRemove(rejectedUser),
      rejectedInvitation: arrayUnion(rejectedUser)
    });
  }

The rejectFriendRequest method is working and updating the array in the specified document.
But I can't get documents from Firestore, and I'm not sure what library to use at this point.
And the first idea was to use email addresses for the ID of a document, but that would not work because, when updating, it couldn't find an ID with a "." in it.

This is one of the approaches I have used:

async getUser(id: string) {

    var usersRef = this.aF.collection("users").doc(id);

    var colRef = collection(this.firestore, "users")
    var docreference = await doc(colRef, id);

    docData(docreference).subscribe( (result) => {
      console.log(result);
    })

  }

If you want to observe the document for changes, you'll need to set the document reference and the valueChanges() method on that reference inside your constructor so that you can create an update method which can update the item reference as it changes.

This approach would probably be good so all your methods can access it on this Official example docs

import { Component } from '@angular/core';
import { AngularFirestore, AngularFirestoreDocument } from '@angular/fire/compat/firestore';
import { Observable } from 'rxjs';

export interface Item { name: string; }

@Component({
  selector: 'app-root',
  template: `
    <div>
      {{ (item | async)?.name }}
    </div>
  `
})
export class AppComponent {
  private itemDoc: AngularFirestoreDocument<Item>;
  item: Observable<Item>;
  constructor(private afs: AngularFirestore) {
    this.itemDoc = afs.doc<Item>('items/1');
    this.item = this.itemDoc.valueChanges();
  }
  update(item: Item) {
    this.itemDoc.update(item);
  }
}

Minimal changes in your situation in order to see information should be something along the lines of:

const itemDoc = this.firestore.doc(`users/${documentId}`);
const item = itemDoc.valueChanges();
console.log('item', item);

The 2nd Firestore defined in your constructor seems odd and like it should not be there so I would try to look at the examples more.