TypeScript组件传theme属性报错：Property 'theme'不存在于IntrinsicAttributes

我是TypeScript初学者，正在用styled-components和自定义钩子实现暗黑模式，给ToggleTheme组件传递theme属性时触发了以下TypeScript错误：

(property) theme: any
Type '{ theme: any; toggleTheme: any; }' is not assignable to type 'IntrinsicAttributes'.
  Property 'theme' does not exist on type 'IntrinsicAttributes'.ts(2322)

错误原因 #

1. ToggleTheme组件没有定义接收props的类型，TypeScript默认认为它不接受任何外部props，传递theme时自然会报错。
2. useDarkMode钩子的返回值没有明确类型标注，导致theme和toggleTheme被推断为any类型，不符合TypeScript的类型安全要求。

修复步骤 #

1. 给ToggleTheme组件定义Props类型

修改ToggleTheme.tsx，明确组件接收的props类型，同时添加切换主题的逻辑：

import { FC } from 'react';

// 定义组件接收的props类型
interface ToggleThemeProps {
  theme: 'dark' | 'light';
  toggleTheme: () => void;
}

// 使用FC泛型指定组件的props类型
export const ToggleTheme: FC<ToggleThemeProps> = ({ theme, toggleTheme }) => {
  return (
    <button onClick={toggleTheme}>
      当前主题：{theme === 'dark' ? '暗黑模式' : '亮色模式'}，点击切换
    </button>
  );
};

2. 给useDarkMode钩子添加明确的类型标注

修改useDarkMode.tsx，让状态和返回值的类型更清晰，避免any：

import { useState } from 'react';

export const useDarkMode = () => {
  // 限定theme的状态只能是'dark'或'light'
  const [theme, setTheme] = useState<'dark' | 'light'>('dark');

  const toggleTheme = () => {
    // 使用函数式更新更安全
    setTheme(prevTheme => prevTheme === 'dark' ? 'light' : 'dark');
  };

  // 用as const让TypeScript推断返回值为只读数组，类型更准确
  return [theme, toggleTheme] as const;
};

3. 在HeaderComponent中正确传递Props

修改HeaderComponent.tsx，明确导入ToggleTheme的路径，并同时传递theme和toggleTheme：

import styled from 'styled-components';
import { useDarkMode } from '../hooks';
// 明确导入路径，避免模糊导入
import { ToggleTheme } from './ToggleTheme';

const Header = styled.header`
  position: relative;
  width: 100%;
  display: inline-block;
  float: left;
  margin: 0;
  &:after {
    clear: both;
    content: '';
    display: table;
  }
`;

export const HeaderComponent = () => {
  const [theme, toggleTheme] = useDarkMode();
  console.log(theme);
  return (
    <>
      <Header>
        <ToggleTheme theme={theme} toggleTheme={toggleTheme} />
      </Header>
    </>
  );
};

这样修改后，TypeScript的类型错误就会消失，同时代码的类型安全性和可读性也得到了提升。

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