Javascript TypeError:无法读取属性'；匹配'；未定义的类型（react和graphql）

我试图从URL中获取一个部分，将其作为参数传递给graphql，以便获取数据！首先，我创建了一个react应用程序，从graphql获取数据以获得所有订单的列表，然后我创建了一个按钮，该按钮将重定向到一个新页面，其中应该显示订单详细信息

订单id如下：

gid://shopify/Order/12345678

（所有这些，而不仅仅是数字）

指向订单页面详细信息的链接如下所示：

http://localhost:3000/orders/gid://shopify/Order/12345678

要访问此页面，我在我的ListOrders组件中添加了以下链接：

 <Link to={`/orders/${id}`} className="btn btn-secondary">
  Details
 </Link>

OrderDeatils组件：

 let { id } = props.match.params.id;

从“React”导入React；
从'@apollo/client'导入{gql，useQuery}；
从“react引导/表格”导入表格；
从'react router dom'导入{Link}；
const GET_Single_Orders=gql`
查询订单（$id:id！）{
订单（id:$id）{
身份证件
显示财务状态
显示完成状态
电子邮件
身份证件
创建数据
小计价格
退款总额
总运价
总价格
总税
更新的
行项目{
边缘{
节点{
自定义属性{
钥匙
价值
}
量
标题
身份证件
变体{
身份证件
标题
重量
重量单位
价格
形象{
src
}
}
}
}
}
发货地址{
地址1
地址2
城市
公司
国家
国家代码
名字
身份证件
姓氏
名称
电话
省份
省代码
拉链
}
}
}
`;
导出默认函数OrderDetails（{props}）{
设{id}=props.match.params.id；
const{loading，error，data}=useQuery（获取单个订单{
变量：{id}
});
如果（装载）返回装载。。。；
if（error）返回`error！${error}`；
返回(
创建于
创建人
履行
财务状况
总价
行动
{data.Order.map（{id，createdAt}）=>(
{createdAt}
))}
);
}

我需要得到身份证（gid://shopify/Order/12345678 )从URL将其传递给变量，如图所示，但我得到以下错误类型错误：无法读取未定义的属性“match”

更新：

此错误已更正，但我仍然无法从graphql获取详细信息数据，因为只有id中的数字作为变量发送

更新：

<Route exact path='/orders/:gid://shopify/Order/:id' component={OrderDetails}  />

错误：TypeError:无法读取null的属性“map”

---

请求中发送的变量：id:12345678（仅数字，但我需要gid://shopify/Order/12345678）

在定义

道具时，不应使用
{}

导出默认函数OrderDetails（props）{

更新

改变

<Route exact path='/orders/gid://shopify/Order/:id' component={OrderDetails}  />

这有点起作用，但它产生了另一个问题：TypeError:无法读取null的属性“map”，可能是因为它没有获得正确的url，所以调用了一个错误？这意味着查询了
数据。Order
值是
null
。您应该检查gql查询是否工作正常。是的，当我传递id时，它在Graphql中工作正常（如帖子中所示）作为一个查询变量，但在这里它不起作用，所以我认为问题在于我没有得到正确的idI。我认为您的路线上有输入错误。请检查我更新的答案，并告诉我是否我错了。@RaziMelliti您可以
控制台。log（id）
（仅限数字？）或者检查网络请求正文详细信息以检查作为变量传递/发送的内容只需在传递到变量之前将字符串添加到id（从路由）我这样做了，我得到了随请求发送的id，但随后得到了数据。Order.Map不是函数error此“深度级别”没有数组？
<Route exact path='/orders/gid://shopify/Order/:id' component={OrderDetails}  />

<Route exact path='/orders/:id' component={OrderDetails}  />

const { loading, error, data } = useQuery(GET_Single_Orders, {
    variables: { id: `gid://shopify/Order/${id}` }
});