Typescript 将对象数组传递给子组件，但 TS 对类型不满意

大家好，我正在try 输入一个对象数组，我将其作为props 通过.

Data.json:

[
  {
    "category": "Reaction",
    "score": 80,
    "icon": "../../../assets/images/icon-reaction.svg"
  },
  {
    "category": "Memory",
    "score": 92,
    "icon": "../../../assets/images/icon-memory.svg"
  },
]

我将此数据导入到App组件，并将其作为props 传递给其子组件UserSkillResult:

    import React, { FC } from 'react';
import './App.css';
import UserSkillResult from './UserSkillResult/UserSkillResult';
import scoreData from '../data/data.json';

const App: FC = (): JSX.Element => {
  // console.log('APP', scoreData);
  return (
    <div >
      <div>
        <UserSkillResult scoreData={scoreData} />
      </div>
    </div>
  );
};

export default App;

在子组件中，我try 键入以下props :

type SkillType = {
  category: string;
  score: number;
  icon: string;
};

type UserSkillResultType = SkillType[];

export const UserSkillResult: FC<UserSkillResultType> = ({
  scoreData,
}): JSX.Element => return what ever

我收到的错误是:

Property 'scoreData' does not exist on type 'UserSkillResultType'.ts(2339)

我很困惑，因为scoreData不是data.json上的关键字，它突出的是props 名称