0
178
ViewsNo se puede desestructurar la propiedad 'chat' de '_ref' ya que no está definida (firebase & react)
Tengo este código que se ejecuta para obtener datos de una colección de firebase:
useEffect(() => { db.collection("chatLists") .onSnapshot((snapshot) => { if(snapshot) { let chattingLists = snapshot.docs.map((doc) => { if(doc.data().users.includes(user.email)) { return { chat: doc.data(), id: doc.id }; } }) if(chattingLists !== [undefined]) { setChatLists(chattingLists ? chattingLists : []); } } })}, []);Básicamente, estoy obteniendo todos los documentos de la colección 'chatLists' y viendo si una matriz llamada "usuarios" que tiene dos usuarios incluye el nombre de los usuarios actuales que están usando la aplicación, si lo hacen, los devuelvo todos y se ingresan todos los documentos filtrados dentro de la variable chattingLists. Luego lo configuro en un useState y luego trato de mapearlos todos:
return ( <div> <button onClick={addChat}> Add a chat </button> <> {chatLists !== undefined && chatLists.map(({chat, id}) => ( <p>{id}</p> {/*Anything that i try to get from the chat or id doesn't work and i get error message*/} ))} </> </div>)
Sin embargo, aparece el error: "No se puede desestructurar la propiedad 'chat' de '_ref' porque no está definida".
Y lo extraño es que en algunos usuarios de Chrome funciona perfectamente como quiero y sin errores, pero en otros recibo el mensaje de error anterior.
Además, cada documento en las listas de chat se ve así: 
1 answers
Answer question0
Puede usar el operador de consulta
array-containsen lugar de obtener todos los documentos de la colección y filtrarlos manualmente. Esto le ahorrará muchos cargos de lectura.Debe devolver un valor de la función en el
map, pero actualmente no devuelve nada cuando el documento no contiene un correo electrónico dado y, por lo tanto, hay elementos indefinidos en esa matriz.
Intente refactorizar el código como se muestra a continuación:
useEffect(() => { db.collection("chatLists") .where("users", "array-contains", "user.email") .onSnapshot((querySnapshot) => { const chats = querySnapshot.docs.map((d) => ({ id: d.id, chat: d.data(), })); setChatLists(chats); }); }, []);