Reactjs React-typescript-元素隐式地具有一个'；任何'；类型，因为表达式的类型为'；字符串'；can'；不能用于索引类型

我有一个演示

我知道这不是一个好问题，但我的演示中的工作代码导致我的实际代码出现错误

我有一个简单的React typescript应用程序，它只显示json数据中的值

在我的演示中，这是可行的，但在我的实际代码中（几乎完全相同），我得到了一个typescript错误

错误在这里

{ProductData[key]

元素隐式具有“any”类型，因为表达式的类型为 “字符串”不能用于索引类型

我想我需要创建一个接口来描述json和链接，但我不确定该接口应该是什么样子

<div>
  <ul>
    {Object.keys(ProductData).map(key => (
      <li key={key}>{ProductData[key].ProductSize.min}</li>
    ))}
  </ul>
</div>

{Object.keys（ProductData）.map（key=>(
{ProductData[key].ProductSize.min}
))}

可以尝试这种方法，但不建议迭代对象以创建数组作为

对象。键（或对对象的任何迭代）不保证项目的顺序

只需在这个用例中使用数组

此外，类型推断并不总是像魔术一样有效。有很多书面文章描述了它是如何以及为什么以这种方式工作的。
ex）
ex）

//示例1
从“/product.json”导入ProductData；
类型ProductDetail={
产品尺寸？：{
min：编号；
最大？：数字；
};
产品高度？：{
min：编号；
最大？：数字；
};
ProductSpacing？：编号；
产品重量：个数；
};
常量应用=（）=>{
返回(

{Object.entries（ProductData.map）(
（[key，value]：[string，ProductDetail]）=>(
{value.ProductSize.min}
)
)}

);
};

也可以尝试这种方式，但几乎没有限制

由于信息的限制，无法推断您可能想象的ProductData类型
需要强制转换键的类型，因为它也可以是类型符号
//示例2
常量应用=（）=>{
返回(

{Reflect.ownKeys（ProductData）.map（（key）=>(
{ProductData[key].ProductSize.min}
))}

);
};
请分享您的ProductData结构模型