Tengo un enlace personalizado llamado useDocument.js a continuación que obtiene los datos de una colección de firestore a través de una identificación específica. ¿Por qué está devolviendo [objeto Objeto] en lugar de un objeto simple?

Intenté acceder a la propiedad de nombre e iniciar sesión en la consola usando document.name pero arroja un error:

TypeError no capturado: no se pueden leer las propiedades de nulo (leyendo 'nombre')

Pero cuando uso JSON.stringify(document), puedo ver las propiedades y los valores del objeto

de los documentos 2: {"name":"Mark Dave Marquez","id":"D68ogPwGLCeaOfoRZIBe"}

Inicio.js

 import React from "react"; import { Link } from "react-router-dom"; import { useAuthContext } from "../../hooks/useAuthContext"; import { useDocument } from "../../hooks/useDocument"; //components import UserProfile from "../../components/UserProfile"; const Home = () => { const { document, error } = useDocument("test", "D68ogPwGLCeaOfoRZIBe"); console.log("documents 2: " + document); return <div> Test </div> }; export default Home;

useDocument.js

 import { useEffect, useState } from "react"; import { projectFirestore } from "../firebase/config"; export const useDocument = (collection, id) => { const [document, setDocument] = useState(null); const [error, setError] = useState(null); // realtime document data useEffect(() => { const ref = projectFirestore.collection(collection).doc(id); const unsubscribe = ref.onSnapshot( (snapshot) => { // need to make sure the doc exists & has data if (snapshot.data()) { setDocument({ ...snapshot.data(), id: snapshot.id }); setError(null); } else { setError("No such document exists"); } }, (err) => { console.log(err.message); setError("failed to get document"); } ); // unsubscribe on unmount return () => unsubscribe(); }, [collection, id]); return { document, error }; };

De la colección: