I am trying to view or retrieve all the contents of the array in my collection, I am using reactjs and firebase this is my code

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 })))
  )
}

result

If I try this

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] })))
  )
}

it will just show the entire content of the array 0 per document

This is my database structure:

database structure

This what I did

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)
}

this is the result of the console.log results

so how can i show the content of the "Data" per document