求助：TypeScript报错post属性不存在于IntrinsicAttributes类型

错误原因 #

你在Home组件中给PostCard传入了post属性，但PostCard组件未显式定义接收该属性的类型，TypeScript默认认为组件只能接受HTML元素的固有属性（IntrinsicAttributes），因此抛出类型不匹配的错误。

解决方案 #

需要在PostCard组件文件中，为组件的props定义类型，明确声明它可以接收post属性：

步骤1：为PostCard组件添加类型约束 #

打开../components/PostCard.tsx（对应组件文件），添加类型定义并约束组件props：

import React from 'react';

// 定义单条文章的数据结构
type Post = {
  title: string;
  excerpt: string;
};

// 定义PostCard组件的Props类型
type PostCardProps = {
  post: Post;
};

// 组件接收props并应用类型约束
const PostCard = ({ post }: PostCardProps) => {
  return (
    <div className="post-card">
      <h2>{post.title}</h2>
      <p>{post.excerpt}</p>
    </div>
  );
};

// 保持导出方式与Home组件的导入一致（命名导出）
export { PostCard };

步骤2：确保组件导出与导入匹配 #

如果你的../components目录有index.ts统一管理组件导出，需要在其中补充：

export { PostCard } from './PostCard';
export { Categories } from './Categories';
export { PostWidget } from './PostWidget';

完成以上修改后，TypeScript就能识别PostCard组件允许接收post属性，错误会自动消除。

内容的提问来源于stack exchange，提问作者Divyanshu Rawat