如何从Firestore接收订单数据并映射至React组件？

你当前的核心问题是没有把Firestore获取到的订单数据更新到state变量order中，所以映射时order始终是初始空数组，自然渲染不出组件。以下是具体修改方案：

1. 修正Firestore数据获取逻辑 #

在onSnapshot的回调里，将获取到的订单数据通过setOrder存入state，同时添加监听清理逻辑避免内存泄漏：

const [{basket, user }, dispatch] = useStateValue();
const [order, setOrder] = useState([]);

useEffect(()=>{
  let unsubscribe;
  if (user){
    // 订阅文档变化，unsubscribe是取消订阅的函数
    unsubscribe = onSnapshot(doc(db, "orders", user?.email), (doc) => {
      // 处理文档不存在的情况，默认返回空数组
      const fetchedOrders = doc.exists ? doc.data().order : [];
      console.log("Current data: ", fetchedOrders);
      // 更新state，触发组件重新渲染
      setOrder(fetchedOrders);
    });
  }else{
    // 用户未登录时清空订单数据
    setOrder([])
  }

  // 组件卸载或user变化时，取消Firestore监听
  return () => {
    if (unsubscribe) unsubscribe();
  }
}, [user])

2. 优化列表渲染代码 #

注意避免变量名冲突（map参数别和state的order重名），同时添加React列表必需的key属性（用订单项的唯一标识，比如id）：

<div className='orderPageProduct'>
  {order?.map((orderItem) => (
    <OrderProduct 
      key={orderItem.id} // 替换为你数据里的唯一标识字段
      order={orderItem} 
    />
  ))}
</div>

关键说明 #

• 原来的代码仅在控制台打印数据，但没有触发state更新，组件不会重新渲染映射列表。
• 必须调用setOrder将Firestore返回的数组存入state，React才会感知到数据变化并渲染对应的OrderProduct组件。
• 添加unsubscribe清理逻辑是为了防止组件卸载后仍保留Firestore监听，造成内存泄漏。

内容的提问来源于stack exchange，提问作者Mohit Kuhad