您在 ProductDetail.js 文件中犯了一些错误。

第一：

您可以使用 useEffect 钩子来检查并比较是否存在 匹配的 id 。

第二：

您可以使用 useState 钩子来存储 thisProduct 并通过调用 setThisProduct 来更新 thisProduct 值并在 JSXElement 中使用它。

使用 state 来设置和获取数据始终是一种最佳实践。

Here is more about React.Hooks

第三：

Price 是一个对象，您不能像那样渲染对象，因此在渲染时使用键而不是对象。像这样： {thisProduct?.price?.current?.value

You can learn more about optional chaining

第四：

useParams 获取的 productId 是字符串类型，而 sneakers 获取的 productId 是数字类型。因此，在比较时，您需要将 productId 更改为数字，如下所示： Number(productId)

Learn about Numbers in Js

这是您的完整代码：

// ProductDetail.js
import React, { useContext, useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import { StateContext } from "./GlobalContext";

function ProductDetail() {
  const { productId } = useParams();
  const { sneakers } = useContext(StateContext);
  const [thisProduct, setThisProduct] = useState({});

  useEffect(() => {
    if (sneakers) {
      const findProduct = sneakers.find((product) => {
        return product.id === Number(productId);
      });
      console.log("findproduct", findProduct);
      setThisProduct(findProduct);
    }
  }, [productId, sneakers]);

  return (
    <div>
      {thisProduct && (
        <>
          <h1>{thisProduct?.name}</h1>
          <p>Price: {thisProduct?.price?.current?.value}</p>
          <p>{thisProduct?.description}</p>
        </>
      )}
    </div>
  );
}

export default ProductDetail;

彻底检查你的状态和道具，它没有向子组件提供有效数据

<StateContext.Provider value={{ sneakers }}>
      {console.log(sneakers, "== thisProduct")}
      {children}
  </StateContext.Provider>

控制台将显示你的数据，它为空，所以这就是问题所在