Получить коллекцию firebase на основе uid в React.js

# #reactjs #firebase #google-cloud-firestore

Вопрос:

Я, должно быть, прочитал около 50-100 статей на эту тему. И все же я, кажется, не могу ни решить эту проблему, ни понять ее.

В моей базе данных Firestore у меня есть коллекция под названием «документы». Каждый документ имеет свое собственное поле «uid». Я пытаюсь получить коллекцию на основе uid пользователя, который вошел в систему.

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

пс. Кроме того, похоже, что функция where не используется. Как так вышло?

 import { useEffect, useState } from 'react' import { onAuthStateChanged } from 'firebase/auth' import { db, auth } from '../firebase/config' import { collection, onSnapshot, query, where } from 'firebase/firestore'  import AddDocument from './AddDocument' import Document from './Document'  const DocumentList = ({ title }) =gt; {   const [user, setUser] = useState()  const [documents, setDocuments] = useState([])   console.log(user)   useEffect(() =gt; {   onAuthStateChanged(auth, currentUser =gt; {  setUser(currentUser)  })   const documentCollection = collection(db, 'documents').where('uid', '==', user.uid)   const unSubscribe = onSnapshot(documentCollection, (snapshot) =gt; {  let results = []  snapshot.docs.forEach(document =gt; {  results.push({...document.data(), id: document.id})  })  setDocuments(results)  })   return () =gt; unSubscribe()   }, [user])   return (  lt;div className="mt-16"gt;  lt;h5 className="text-gray-500"gt;{title}lt;/h5gt;  lt;div className="grid grid-cols-8 mt-4"gt;  {documents amp;amp; documents.map((props) =gt; (  lt;Document key={props.id} {...props} /gt;  ))}  lt;AddDocument /gt;  lt;/divgt;  lt;/divgt;  ) }  export default DocumentList  

Ответ №1:

Первый шаг заключается в том, что весь код, необходимый текущему пользователю, должен находиться внутри onAuthStateChanged обратного вызова, так как в противном user случае он еще не будет иметь правильного значения. Так:

 onAuthStateChanged(auth, currentUser =gt; {  setUser(currentUser)  const documentCollection = collection(db, 'documents').where('uid', '==', currentUser.uid)  // 👆  const unSubscribe = onSnapshot(documentCollection, (snapshot) =gt; {  let results = []  snapshot.docs.forEach(document =gt; {  results.push({...document.data(), id: document.id})  })  setDocuments(results)  }) }) //return () =gt; unSubscribe() // 👈 This will also have to change