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

Question

我正在尝试构建一个消息传递应用程序，但我不知道如何从文档参考中获取来自 firestore 的实时更新数据。 让我更好地解释一下，在与用户相关的每个文档中，我都有一组文档引用，指向用户拥有的各种聊天。 我设法获得了实时更新的数组，但我还想获得每个实时更新的文档引用中存在的数据。

目前我正在为数组中的每个元素使用firebase的getDoc function，它会提取我需要但不会实时更新的数据。

 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

通过使用两个 useEffect 解决，一个获取引用数组，然后将文档 ID 推送到变量中，另一个 useEffect 获取具有该文档 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>