Angular - проблема с получением одного документа из Firestore

Question

Я пытаюсь составить список пользователей, который является коллекцией в Firestore, после чего пользователь сможет щелкнуть по пользователю и перенаправиться на страницу профиля пользователя с большим количеством данных. Я могу отображать данные; тем не менее я получаю консольную ошибку для каждого другого документа в коллекции, в которой говорится, что свойства не найдены.

пользовательский profile.ts:

 ngOnInit() {
//get user id from route
this.uid = this.route.snapshot.params['uid'];

//get user document reference from firestore using auth service
this.authService.getUserDocById(this.uid).get().then(doc =>{
    this.user = doc.data();
  }
);

if(this.uid == this.authService.getFirebaseUser().uid){
  this.isOwnProfile = true;
}
else{
  this.isOwnProfile = false;
 }
}

auth.service.ts:

getUserDocById(uid: string)
  {
    var path = ('users/' + uid);
    return this.afs.doc(path).ref; 
  }

пользователь profile.component.html:

  <div class="imagewrapper">
  <div [ngClass]="{ 'isOwnImage' : isOwnProfile }" [ngStyle]="{ 'background-image': 'url(' + user.profileImageUrl + ')' }" class="profileImage"></div>

Я получаю эту ошибку, хотя многие пользователи находятся в коллекции, кроме той, которую я сейчас просматриваю:

TypeError: Cannot read property 'profileImageUrl' of undefined
    at Object.eval [as updateDirectives] (UserProfileComponent.html:2)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:10853)
    at checkAndUpdateView (core.js:10250)
    at callViewAction (core.js:10491)
    at execComponentViewsAction (core.js:10433)
    at checkAndUpdateView (core.js:10256)
    at callViewAction (core.js:10491)
    at execEmbeddedViewsAction (core.js:10454)
    at checkAndUpdateView (core.js:10251)
    at callViewAction (core.js:10491)