React+Firebase+Redux中useParams无法获取商品详情求助

核心思路 #

不用遍历映射所有商品，而是利用数组的find方法，结合useParams拿到的ID精准匹配单个商品，以下是具体实现步骤：

1. 从Redux获取商品列表并匹配ID #

通过useSelector获取Redux中的商品数组，再用find方法筛选出与URL中ID匹配的商品，替代之前的全量映射逻辑：

import { useParams } from 'react-router-dom';
import { useSelector } from 'react-redux';

const ProductDetail = () => {
  const { id } = useParams();
  // 从Redux store获取商品列表
  const foodItems = useSelector(state => state.food.items);
  // 根据ID查找目标商品
  const targetProduct = foodItems.find(item => item.id === id);

  // 处理商品未找到的边界情况
  if (!targetProduct) {
    return <div>该商品不存在或已下架</div>;
  }

  return (
    <div className="product-detail-container">
      <h2>{targetProduct.title}</h2>
      <img src={targetProduct.image} alt={targetProduct.title} className="product-img" />
      <p className="product-desc">{targetProduct.description}</p>
      <span className="product-price">¥{targetProduct.price}</span>
    </div>
  );
};

export default ProductDetail;

2. 处理Firebase异步数据加载问题 #

如果商品列表是从Firebase异步获取的，需先判断数据是否加载完成，避免因数组为空导致匹配失败：

// 新增：从Redux获取加载状态
const isLoading = useSelector(state => state.food.isLoading);

if (isLoading) {
  return <div>加载中...</div>;
}

// 再执行商品匹配逻辑
const targetProduct = foodItems.find(item => item.id === id);

3. 检查ID类型一致性 #

确认Firebase中存储的商品id类型与useParams返回的id类型一致：

• 若Firebase的id是数字类型，需将URL中的字符串ID转为数字：

  const targetProduct = foodItems.find(item => item.id === parseInt(id));
  

内容的提问来源于stack exchange，提问作者Ar Eej