我在进行一个小的 React Router 练习时遇到了麻烦

我有一个文件“ItemDetail.js”，其中我定义了一个组件“ItemDetail”，它由另一个组件的路由调用，如下所示： <Route path="/shop/:id" component={ItemDetail}/> 。 这是我的代码：

import React, {useState, useEffect} from "react";

function ItemDetail({ match }) {

    const [item, setItem] = useState({});
    console.log(match);

    useEffect(() => {
        fetchItem();
    }, []);

    
    const fetchItem = async () => {
        const data = await fetch(`https://fortnite-api.theapinetwork.com/item/get?id=${match.params.id}`);
        const item = await data.json();
        setItem(item);
        console.log(item);
    }


    return (
      <div>
          <h3>Item: {item.data.item.name}</h3>
      </div>
  );
}

export default ItemDetail;

路径的 id 是我进行 API 调用（通过 match.params.id ）所需的 id。

fetchItem() 方法以 JSON 格式获取我需要的数据，然后我将其保存在状态 item 中，然后渲染我的渲染内容。但是它在我从 JSX 访问 item.data.name 的行中抛出了一个错误：“TypeError：无法读取未定义的属性‘item’”。

奇怪的是：当我将 <h3>Item: {item.data.item.name} </h3> 更改为 <h3>Item: </h3> 然后再改回 <h3>Item: {item.data.item.name} </h3> 时，它起作用了，只有这一次，当我再次刷新或浏览我的网站到这个路径时，它会再次抛出这个错误