React+TypeScript报错：属性无法分配给IntrinsicAttributes类型

问题根源 #

你当前用any作为组件props类型，看似能绕过类型检查，但TypeScript严格模式下，这种模糊定义反而可能触发属性不匹配错误；另外Header组件需要image属性，但Sidebar里只传了title，既存在类型隐患也有运行时风险。

修复方案 #

给每个组件定义明确的Props类型替代any，同时确保传递的属性与组件需求匹配：

1. 修改Header.tsx，定义清晰的Props类型

// 定义Header组件接收的属性类型
type HeaderProps = {
  image: string; // 必传的图片地址
  title?: string; // 可选的标题，根据需求决定是否保留
};

const Header = (props: HeaderProps) => {
  return (
    <header className="header">
      <img src={props.image} alt="Logo image" />
      {/* 若需要显示标题，添加这段代码 */}
      {props.title && <h2>{props.title}</h2>}
    </header>
  );
};

export default Header;

2. 修改Sidebar.tsx，同步定义Props并传递正确属性

import Header from "./Header";

// 定义Sidebar组件接收的属性类型
type SidebarProps = {
  pageTitle: string;
  logoImage: string; // 需要传给Header的图片地址
};

const Sidebar = (props: SidebarProps) => {
  return (
    <aside className="sidebar">
      {/* 传递Header需要的所有属性 */}
      <Header title={props.pageTitle} image={props.logoImage} />

      ...
    </aside>
  );
};

export default Sidebar;

额外说明 #

• 若不需要Header接收title属性，直接删除Sidebar里的title={props.pageTitle}，同时移除HeaderProps中的title字段即可。
• 用明确类型替代any是TypeScript最佳实践，能提前发现属性不匹配、缺失等问题，避免运行时错误。

内容的提问来源于stack exchange，提问作者Mr.Singh