Firebase query function returning undefined when page is refreshed

Question

I Got a service in Angular that gets User Data from firestore. The relevant service code is as follows:

userType:string = ''

async getProfileType(): Promise<string> {
    const userUID = await this.getUserUID();

    const getUserType = () => {
      this.af
        .collection('users')
        .doc(userUID)
        .valueChanges()
        .subscribe((doc: any) => {
          console.log(doc.userType);
          this.userType = doc.userType;
        });

      return this.userType;
    };
    return getUserType();
  }

When I try to invoke it in the component by injecting it and calling the function in the ngOnInit method I get the following error: ERROR TypeError: Cannot read properties of undefined (reading 'userType')

And when I invoke the function from the service manually it returns the data fine, but I'm not sure why it can't do the same thing when invoked on the ngOnInit method.

I've tried making ngOnInit async and use await on the getProfileType function but that didn't seem to make a difference.

The Component TypeScript is as follows:

import { Component, OnInit } from '@angular/core';
import { AngularFirestore } from '@angular/fire/compat/firestore';
import { UserInfoService } from '../services/user-info/user-info.service';

@Component({
  selector: 'app-edit-profiles',
  templateUrl: './edit-profiles.component.html',
  styleUrls: ['./edit-profiles.component.scss'],
})
export class EditProfilesComponent implements OnInit {
  constructor(public userInfo: UserInfoService, private af: AngularFirestore) {}

  async ngOnInit() {
    this.userInfo.getProfileType();
  }

The Component HTML is as follows:

<div *ngIf="userInfo.userType === 'user'">
  You're a User
</div>
<div *ngIf="userInfo.userType === 'project'">
  You're a Project
</div>
<button mat-flat-button (click)="userInfo.getProfileType()">Get Profile Type</button>

Any help or direction is appreciated, cheers!