如何显示所有这些字段？

我已经可以检索文档并显示在控制台中，但是如何检索各个字段以便可以在屏幕中显示它？

 useEffect(() => {
    const unsubscribe = firestore
      .collection("orders")
      .where("uid", "==", user.id)
      .onSnapshot((snapshot) => {
        console.log(snapshot.docs.map((doc) => ({ id: doc.data() })));
      });

    return () => {
      unsubscribe();
    };
  }, []);

我想获得这些单独的字段，如何映射“items”数组？

这是它在 console.log 中显示的内容，我想访问和显示各个字段，例如地址、项目和交货日期

Document Data as JSON: [{"id":{"displayName":"Jenn ","items":[{"productPrice":"130","productUserHandler":null,"createdDate":{"seconds":1617787002,"nanoseconds":70000000},"qty":1,"productDesc":"Cheese ","productName":"Pizza","productImg":"https://firebasestorage.googleapis.com/v0/b/ajc-pizza.appspot.com/o/product-images%2Ftunapizza.jpg?alt=media&token=e307d9aa-bc67-4262-94e7-7c7346cc933b","documentID":"MS1PmRyGTWitCaLtV5Xk"},{"documentID":"ndxxdJyS40aRcndJLg9E","productUserHandler":null,"qty":1,"productPrice":"130","productName":"Pizza","productImg":"https://firebasestorage.googleapis.com/v0/b/ajc-pizza.appspot.com/o/product-images%2Fvegetablepizza.jpg?alt=media&token=6f02cd14-6bd9-40dd-9b31-95925578422b","createdDate":{"seconds":1617787021,"nanoseconds":448000000},"productDesc":"Vegetables / Cheese"}],"deliveryDate":"2021-05-08","orderCreatedAt":{"seconds":1619862395,"nanoseconds":463000000},"userID":"kGhSlhM2pIgL9srfXviw9Xew4mI3","total":260,"phone":"+63 9353 276961","address":"US"}},{"id":{"phone":"(555) 555-1234","items":[{"productImg":"https://firebasestorage.googleapis.com/v0/b/ajc-pizza.appspot.com/o/product-images%2Ftunapizza.jpg?alt=media&token=e307d9aa-bc67-4262-94e7-7c7346cc933b","qty":2,"createdDate":{"seconds":1617787002,"nanoseconds":70000000},"documentID":"MS1PmRyGTWitCaLtV5Xk","productName":"Tuna Pizza","productPrice":"130","productUserHandler":null,"productDesc":"Tuna / Cheese "}],"deliveryDate":"2021-05-03","address":"US","displayName":"Jenn ","total":260,"userID":"kGhSlhM2pIgL9srfXviw9Xew4mI3","orderCreatedAt":{"seconds":1619857372,"nanoseconds":32000000}}}]