Каков наилучший способ получить несколько документов из Firebase в реакции?

Question

Я изучаю возможности реакции, ioni c и Firebase, как молодой программист. Я хочу получить несколько документов из firebase firestore и установить эти данные в состояние с помощью реакционных хуков. Сначала я хочу получить данные пользователя, такие как имя, имя пользователя и адрес электронной почты. Коллекция пользователей хранится в документе, который хранится в коллекции школ, например:

Школы ( коллекция )
- Школа X ( документ )
---- Пользователи ( коллекция )
-------- Пользователь Y ( документ )

Итак, я получаю данные пользователя Y в школе X, используя следующий код:

App.tsx

const [gebruikerdata, setGebruikerdata ] = useGlobalState('gebruikerdata')
useEffect(() => {
LogIn(userEmail, userPassword')
getCurrentUser().then((user: any) => {
  if (user) {
    setGebruiker(user)
    GetUserData(SelectedSchool, user.uid).then((snapdata: any) => {
        setGebruikerdata(snapdata) //set state with the user data 
    })
  }
})
})

Firebase.tsx

export function GetUserData(schoolID: string, userID: string) {
return new Promise((resolve, reject) => {
    const unsubscribe = firebase.firestore().collection('schools').doc(schoolID).collection('users').doc(userID).onSnapshot(function(snapdata) {
        resolve(snapdata.data())
        unsubscribe()
    })
})
}

Это работает как шарм! Он обновляет данные и работает на всех страницах. Тем не менее, я также хочу получить данные о школе, такие как название и местоположение конкретной школы, в которой находится пользователь. Таким образом, данные «Школа X» в структуре файла выше. Я попробовал следующий код:

App.tsx (новый)

  const [gebruikerdata, setGebruikerdata ] = useGlobalState('gebruikerdata')
  const [schooldata, setSchooldata ] = useGlobalState('schooldata')      
useEffect(() => {
    LogIn(userEmail, userPassword)
    getCurrentUser().then((user: any) => {
      if (user) {
        setGebruiker(user)
        GetUserData(SelectedSchool, user.uid).then((snapdata: any) => {
            setGebruikerdata(snapdata)
          }
          GetSchoolData(SelectedSchool).then((schoolsnapdata: any) => {
            setSchooldata(schoolsnapdata) //set state with school data
          })
        })
      }
    })
  })

Firebase.tsx (новый)

export function GetUserData(schoolID: string, userID: string) {
    return new Promise((resolve, reject) => {
        const unsubscribe = firebase.firestore().collection('schools').doc(schoolID).collection('users').doc(userID).onSnapshot(function(snapdata) {
            resolve(snapdata.data())
            unsubscribe()
        })
    })
}

export function GetSchoolData(schoolID: string) {
    return new Promise((resolve, reject) => {
        const unsubscribe = firebase.firestore().collection('schools').doc(schoolID).onSnapshot(function(snapdata) {
            resolve(snapdata.data())
            unsubscribe()
        })
    })
}

Это загружает данные успешно, но теперь проблема в том, что мое приложение больше не отвечает. Он зависает, и я не могу открыть другие страницы (переключать вкладки). Есть ли более эффективный способ сделать это? Я уверен, что позже мне понадобится и другие данные для моего приложения, но я не понимаю, почему мое приложение зависает, когда я загружаю данные из нескольких документов из firebase.

Мои вопросы:

• Почему мое приложение зависает при получении нескольких документов, как я должен получить данные?
• Что делает «unsubscribe ()» в firebase.tsx? Потому что данные все еще обновляются при изменении. Как это работает?

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