如何通过 React 中的实时更新从 Firestore 文档参考中获取数据

Question

I'm trying to build a messaging app but I can't figure out how to get data with real-time updates from firestore from a document reference. Let me explain better, inside each document relating to the user I have an array of document references to the various chats that the user has. I managed to get that array that updates in realtime but I would also like to get the data present within each document reference that is updated in realtime.

At the moment I'm using firebase's getDoc function for each element within the array which pulls out the data that I need but doesn't update in real time.

 const GetDiscussionsList = (userId: string, closed = false) => { const [discussions, setDiscussions] = useState<Discussions[]>([]); useEffect(() => { const unsubscribe = onSnapshot( doc(db, 'users', userId).withConverter(usersConverter), { includeMetadataChanges: true }, async (doc) => { const user = doc.data(); if (user && user.apps) { const apps = user.apps.find( (a: any) => a.app.id == 'chat' ); if (apps && apps.discussions) { const discussionsArray = apps.discussions; if (discussionsArray) { //Function that for every document call the getDoc firebase function but this don't update in real time await getDataFromReferencesArray(discussionsArray, true).then( (discussions) => { setDiscussions(discussions.filter((d) => d.closed == closed)); } ); } } } } ); return () => { unsubscribe(); }; }, [userId]);

Answer 1

Solved By using two useEffects, one that get the reference array, then push the document ids in a variable and the other useEffect get the documents that have that document id

 const GetDiscussionsList = (userId: string, closed = false) => { const [discussionsRef, setDiscussionsRef] = useState<any[]>([]); const [path, setPath] = useState<string>(); const [discussions, setDiscussions] = useState<Discussions[]>([]); useEffect(() => { const unsubscribe = onSnapshot( doc(db, 'users', userId).withConverter(usersConverter), { includeMetadataChanges: true }, async (doc) => { const user = doc.data(); if (user && user.apps) { const apps = user.apps.find( (a: any) => a.app.id == 'chat' ); if (apps && apps.discussions) { const discussionsArray = apps.discussions; if (discussionsArray) { setDiscussionsRef( discussionsArray.map((d: DocumentReference) => { return d.id; }) ); if (discussionsArray.length > 0) { const pathArray = discussionsArray.map((ref) => ref.path); // get path minus document name setPath( pathArray[0].substring(0, pathArray[0].lastIndexOf('/') + 1).slice(0, -1) ); } } } } } ); return () => { unsubscribe(); }; }, [userId]); useEffect(() => { if (discussionsRef.length > 0 && path) { const q = query( collection(db, path), where('__name__', 'in', discussionsRef) ); const unsubscribe = onSnapshot( q, { includeMetadataChanges: true }, (querySnapshot) => { const discussions_tmp: Discussions[] = []; querySnapshot.forEach((doc) => { discussions_tmp.push({...(doc.data() as Discussions), id: doc.id, }); }); setDiscussions(discussions_tmp); } ); return () => { unsubscribe(); }; } }, [discussionsRef, path]); return discussions; };

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>