Почему Angular Firestore возвращает данные, а также генерирует ошибки? - PullRequest
Новая
       68

Почему Angular Firestore возвращает данные, а также генерирует ошибки?

0 голосов
/ 14 июля 2020

У меня есть профиль пользователя, который извлекает данные пользователя из документа firestore. Документ возвращает данные, как ожидалось, однако в консоли я получаю 8 идентичных ошибок, которые предполагают, что данные не определены.

Мой код для получения пользовательских данных следующий:

TS : 

export class UserProfileComponent implements OnInit {
  activeUserID: string;
  userRef: AngularFirestoreDocument<User>;
  userData;

  constructor(public afAuth: AngularFireAuth, private db: AngularFirestore) {
    this.getActiveUser();
  }

  ngOnInit() {

  }

  async getActiveUser(){
    const user = await this.afAuth.currentUser;
    this.activeUserID = user.uid;
    this.getUserId();
    this.getUserData();
  }

  getUserId(){
    this.userRef = this.db.collection('users').doc(this.activeUserID);
  }

  getUserData(){
    this.db.collection('users').doc(this.activeUserID).ref.get().then((doc) => {
      this.userData = doc.data();
    });
  }
}

HTML: 

<div class="col-md-5">
  <h2>{{userData.displayName}}</h2>
  <h6>{{userData.username}}</h6>
  <p>This is a description about the user.</p>
</div>

Кроме того, если я console.log userData, он возвращает undefined в зависимости от того, где он выводится.

Скриншот консоль: 

core.js:6228 ERROR TypeError: Cannot read property 'displayName' of undefined
    at UserProfileComponent_Template (user-profile.component.html:10)
    at executeTemplate (core.js:12156)
    at refreshView (core.js:11995)
    at refreshComponent (core.js:13445)
    at refreshChildComponents (core.js:11716)
    at refreshView (core.js:12051)
    at refreshEmbeddedViews (core.js:13391)
    at refreshView (core.js:12022)
    at refreshComponent (core.js:13445)
    at refreshChildComponents (core.js:11716)

1 Ответ

2 голосов
/ 14 июля 2020

Подпись TypeScript для doc.data() предполагает, что он может возвращать undefined. Это происходит, когда в месте вашего запроса нет документа. Поскольку Firestore не дает никаких гарантий относительно существования документа во время запроса, вы должны проверить, существуют ли данные документа, прежде чем использовать его.

Это сообщение об ошибке TypeScript специально сообщает вам, что вы пытаетесь ссылаться на свойство объекта, на самом деле оно может быть неопределенным, что приводит к сбоям. Вы должны проверить, есть ли у него значение объекта, прежде чем использовать его, а также решить, что вы хотите сделать, если оно не существует. 

this.db.collection('users').doc(this.activeUserID).ref.get().then((doc) => {
  const data = doc.data();
  if (data) {
    // in this block, TypeScript guarantees you that data will have an object value
    this.userData = data;
  }
  else {
    // what do you want to do if it doesn't exist?
  }
});
...