React+TS组件传参报错：Property 'title'不存在于IntrinsicAttributes类型

问题根源 #

你在ProjectList组件的映射循环里，错误地渲染了组件自身（<ProjectList>），而非目标组件ProjectItem。由于ProjectList未定义title、description、image这些属性，TypeScript会判定这些props不属于React内置属性（IntrinsicAttributes），从而抛出类型不匹配的错误。

修正代码 #

修改ProjectList.tsx中的映射渲染部分，将<ProjectList>替换为<ProjectItem>：

const ProjectList = () => {
  return (
    <ul className={classes.project_display}>
      {DUMMY_PROJECTS.map((project) => {
        return <ProjectItem
          key={project.id}
          title={project.title}
          description={project.description}
          image={project.image}
        />;
      })}
    </ul>
  );
};

补充说明 #

确保你已经正确导入了ProjectItem组件：

import ProjectItem from './ProjectItem';

修正后，TypeScript会自动匹配ProjectItem定义的ProjectProps接口，之前的props类型错误就会消失。

内容的提问来源于stack exchange，提问作者Vladislav Marinov