无法在 firestore 的 productdetail 页面上获取每家餐厅的详细信息

Question

我为 ProductDetail 页面创建了一个动态路由（每个 Restaurant 都有自己的详细信息，应显示在此页面上）。路由正在运行，但我没有得到任何数据，而且我无法通过每家餐厅的 Id 找出从 Firestore 获取数据的正确方法。

PS：产品详情在控制台呈现，但问题仍然是如何显示到详情页

ProductDetail.js

import { firestore } from "../../../../../fire";

function ProductDetail() {
  const { productId }= useParams();

  const [product, setProduct] = useState();

  useEffect( () =>  {
 
   firestore
     .collection("Restaurants")
     .doc(productId).get()
     .then( doc => {
       console.log(doc.data())
       setProduct(doc.data());
     })
   }, () => {

 }
 );
 
  return (
    <div className="col-12">
      <div className="card">
        <h1>{productId.name_restaurant} </h1>
        <p>Price:${productId.Currency}</p>
        <p>{productId.email} </p>
      </div>
    </div>
  );
  }
export default ProductDetail;   

这是我的控制台：返回餐厅的所有详细信息

仍然无法在我的页面上返回详细信息

Answer 1

我可以看到您的状态名称是 product，参数名称是 productId。在返回时您使用了productId，这是不正确的。

当您将数据存储到状态中时。你应该写product 而不是productId，如下所示

<div className="col-12">
    <div className="card">
      <h1>{product?.name_restaurant} </h1>
      <p>Price:${product?.Currency}</p>
      <p>{product?.email} </p>
    </div>
</div>