React ProductDetail页面通过ID从Firestore取数后无法渲染至页面如何解决

问题修复方案 #

你的代码存在4个可直接修复的问题：

• 未导入React核心Hook：useState、useEffect需要从react包中导入，否则运行会抛出未定义错误
• useEffect依赖配置错误：useEffect第二个参数应为依赖数组，你传入了空函数会导致请求逻辑触发异常，需要替换为[productId]，保证仅当路由中的餐厅ID变化时才重新拉取数据
• 渲染数据源错误：你将Firestore返回的餐厅数据存在product状态变量中，但渲染时错误调用了路由参数productId的属性，productId仅为ID字符串，本身没有餐厅信息属性
• 缺少初始加载兜底：首次渲染时请求还未完成，product为初始的undefined，直接访问属性会报错，需要用加载状态兜底

修复后的完整代码如下：

import React, { useState, useEffect } from 'react';
import { useParams } from "react-router-dom";
import { firestore } from "../../../../../fire";

function ProductDetail() {
  const { productId }= useParams();
  const [product, setProduct] = useState(null);

  useEffect(() => {
    firestore
     .collection("Restaurants")
     .doc(productId).get()
     .then(doc => {
       console.log(doc.data())
       setProduct(doc.data());
     })
   }, [productId]);
 
  // 加载中状态
  if (!product) return <div>加载中...</div>

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

内容的提问来源于stack exchange，提问作者Houda Boukhobza