Reactjs 如何显示所有这些字段？

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

 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中显示的内容，我希望访问并显示各个字段，如地址、项目和交付日期

以JSON格式记录数据：

---

[{“id”：{“displayName”：“Jenn”，“items”：[{“productPrice”：“130”，“productUserHandler”：null，“createdDate”：{“秒”：1617787002，“纳秒”：7000000}，“数量”：1，“productDesc”：“Cheese”，“产品名称”：“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，“文档ID:“MS1PmRyGTWitCaLtV5Xk”}，{“文档ID:“ndxxdJyS40aRcndJLg9E”，“productUserHandler:”空，“数量”：1，“productPrice:”130，“产品名称”：“比萨饼”，“productImg:”https://firebasestorage.googleapis.com/v0/b/ajc-pizza.appspot.com/o/product-images%2Fvegetablepizza.jpg?alt=media&token=6f02cd14-6bd9-40dd-9b31-95925578422b，“创建数据”：{“秒”：1617787021，“纳秒”：448000000}，“产品描述”：“蔬菜/奶酪”}]，“交货日期”：“2021-05-08”，“订单创建数据”：{“秒”：1619862395，“纳秒”：463000000}用户id:“kGhSlhM2pIgL9srfXviw9Xew4mI3”，“总计”：260，“电话”：“+63 9353 276961”，“地址”：“US”}，{“id”：{“电话”：（555）555-1234”，“项目”：[{“productImg”：”https://firebasestorage.googleapis.com/v0/b/ajc-pizza.appspot.com/o/product-images%2Ftunapizza.jpg?alt=media&token=e307d9aa-bc67-4262-94e7-7c7346cc933b，“数量”：2，“创建数据”：{“秒”：1617787002纳秒：70000000}，“文档ID”：“MS1PmRyGTWitCaLtV5Xk”，“产品名称”：“金枪鱼披萨”，“产品价格”：“130”，“产品用户处理程序”：null，“产品描述”：“金枪鱼/奶酪”}]，“交货日期”：“2021-05-03”，“地址”：“美国”，“显示名称”：“Jenn”，“总计”：260，“用户ID”：“kGhSlhM2pIgL9srfXviw9Xew4mI3”，“订单创建日期”：{“秒”：1619857372，“纳秒”：32000000}]

文档中没有名为

uid

的字段。因此，请确保先添加该字段，否则“where”查询将无法正常工作。您无法从Firestore获取单个字段。请先获取整个文档，然后使用相关数据

 useEffect(() => {
    const unsubscribe = firestore
      .collection("orders")
      .where("uid", "==", user.id)
      .onSnapshot((snapshot) => {
          const userOrders = snapshot.docs.map((doc) => ({ [doc.id]: doc.data() }));
          console.log(userOrders);
          // Logging items of first order
          // console.log(userOrders[0]["items"])
        
      });

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

---

请在地图中使用

[doc.id]：doc.data（）

，以便键为订单id（文档id）。当要在网页上呈现这些内容时，您需要先使用映射函数呈现所有订单，然后在每个订单中使用另一个映射函数来呈现项目。如果您还有其他问题，请告诉我。

图片不完整，但文档中存储了uid，该uid在控制台中正确显示。“console.log（userOrders[0][“items”]）“显示的与userOrders完全相同。@Jennie您可以将您的文档数据作为JSON共享吗？这样我就可以测试了？我已经编辑过了it@JenJennie我的意思是

console.log（JSON.stringify（userOrders））

和共享？我用JSON数据编辑了它