Estoy tratando de ver o recuperar todo el contenido de la matriz en mi colección, estoy usando reactjs y firebase, este es mi código

 async function getData(){ const productreference = collection(firestoredb, "Orders",`${userID}`,"Orderlist" ); const q = query(productreference); onSnapshot(q,(snapshot) => console.log(snapshot.docs.map((doc) => ({ ...doc.data().Data }))) ) }

resultado

Si pruebo esto

 async function getData(){ const productreference = collection(firestoredb, "Orders",`${userID}`,"Orderlist" ); const q = query(productreference); onSnapshot(q,(snapshot) => console.log(snapshot.docs.map((doc) => ({ ...doc.data().Data[0] }))) ) }

solo mostrará todo el contenido de la matriz 0 por documento

Esta es la estructura de mi base de datos:

estructura de la base de datos

Esto es lo que hice

 const [data, setData] = useState([]);

 async function getData(){ const productreference = collection(firestoredb, "Orders",`${userID}`,"Orderlist" ); const q = query(productreference); onSnapshot(q,(snapshot) => setData(snapshot.docs.map((doc) => ({ ...doc.data().Data }))) ) console.log(data) }

este es el resultado de los resultados de console.log

Entonces, ¿cómo puedo mostrar el contenido de los "Datos" por documento?