Ошибка машинописи при хранении данных с помощью Firebase Firestore

Question

Я новичок ie для Firebase. Я пытаюсь реализовать аутентификацию с использованием Firebase. Я использую TypeScript для своего проекта. Я создал функцию следующим образом:

const createUserProfileDocument = async (authUser: firebase.User ) => {
  const userReference = firebase.firestore().doc(`users/${authUser.uid}`)
  const snapshot = await userReference.get(

  if (!snapshot.exists) {
    const { displayName, email, phoneNumber } = authUser
    const creationDate = new Date().getFullYear()
    try {
      await userReference.set({
        displayName,
        email,
        phoneNumber,
        creationDate
      })
    } catch (error) {
      throw new Error("user cannot be created")
    }
  }
  return userReference
}

Я вызвал эту функцию в useEfect следующим образом:

  React.useEffect(() => {
    auth.onAuthStateChanged(async authUser => {
      if (authUser) {
        const userRef = await createUserProfileDocument(authUser)
        userRef.onSnapshot(snapshot => {
          const userData = {...snapshot.data()}
          setLoggedUser({
            id: snapshot.id,
            displayName: userData.displayName,
            creationDate: userData.creationDate,
            email: userData.email,
            phoneNumber: userData.phoneNumber
          })
        })
        history.push("/home")
      } else {
        setLoggedUser(authUser)
      }
    })

  }, [history])

Также тип моего loggedUser следующий:

export interface User {
  id: string,
  displayName: string,
  email: string,
  creationDate: number,
  phoneNumber: string | null
}

Но я получаю следующую ошибку TypeScript:

Property 'displayName' does not exist on type '{}'.  TS2339 

    28 |           setLoggedUser({
    29 |             id: snapshot.id,
  > 30 |             displayName: userData.displayName,     
       |                                   ^
    31 |             creationDate: userData.creationDate,   
    32 |             email: userData.email,
    33 |             phoneNumber: userData.phoneNumber

Может кто-нибудь помочь мне с этим, пожалуйста? Я вижу, что onSnapshot.data () может быть пустым объектом, но я не понимаю, почему? как я могу решить эту ошибку.

Заранее спасибо.

Answer 1

Создание документа для нового пользователя занимает некоторое время. Если тем временем вы присоедините прослушиватель onSnapshot к ссылке на документ этого пользователя, он будет немедленно вызван с пустым / несуществующим документом. И ваш код должен справиться с этим. Пока вы пытаетесь await все, я подозреваю, что вы где-то пропускаете асинхронную операцию.

Ваши варианты:

• Не подключать слушателя пока пользовательский документ не написан.

• Обработка несуществования пользовательского документа в слушателе.

Я бы предпочел второе подход, поскольку он делает код более устойчивым к отсутствующим данным в целом.