React TS报错：'{ children: Element; }'与IntrinsicAttributes无共同属性

错误Type '{ children: Element; }' has no properties in common with type 'IntrinsicAttributes'.ts(2559)的核心原因是ThemeProvider的类型定义与实际接受的props不匹配：你将组件声明为React.FC<{}>（表示不接受任何props），但实际使用时传入了children属性，TypeScript因此抛出类型不兼容错误。

另外你的代码还有两个潜在问题：

• 组件顶层直接执行window.localStorage.setItem("themeMode", theme);会导致每次组件渲染都重复写入本地存储，可能引发不必要的性能问题。
• toggleTheme方法中，更新本地存储时使用的是当前的theme值，而非切换后的新主题值，会导致存储值与实际主题不一致。

1. 修复组件类型定义 #

修改ThemeProvider的类型声明，明确它接受children属性：

// 替换原有的ThemeProvider类型声明
export const ThemeProvider: React.FC<React.PropsWithChildren<{}>> = ({ children }) => {
  // ... 原有逻辑
};

或者，你也可以显式定义props接口：

interface ThemeProviderProps {
  children: React.ReactNode;
}

export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
  // ... 原有逻辑
};

2. 修复本地存储的写入逻辑 #

将本地存储的写入操作放到useEffect中，仅在主题变化时执行；同时修正toggleTheme里的存储逻辑：

import { createContext, useState, useEffect } from "react"; // 新增useEffect导入
import PropTypes from "prop-types";
import { DARK_THEME, LIGHT_THEME } from "../constants/themeConstants";

interface ThemeContextType {
  theme: string;
  toggleTheme: () => void;
}

export const ThemeContext = createContext<ThemeContextType>({
  theme: LIGHT_THEME,
  toggleTheme: () => {}
});

export const ThemeProvider: React.FC<React.PropsWithChildren<{}>> = ({ children }) => {
  const [theme, setTheme] = useState<string>(
    window.localStorage.getItem("themeMode") || LIGHT_THEME
  );

  // 仅在theme变化时写入本地存储
  useEffect(() => {
    window.localStorage.setItem("themeMode", theme);
  }, [theme]);

  const toggleTheme = () => {
    setTheme((prevTheme) => {
      const newTheme = prevTheme === LIGHT_THEME ? DARK_THEME : LIGHT_THEME;
      // 在setState的回调中使用新主题值更新存储
      window.localStorage.setItem("themeMode", newTheme);
      return newTheme;
    });
  };

  return (
    <ThemeContext.Provider
      value={{
        theme,
        toggleTheme,
      }}
    >
      {children}
    </ThemeContext.Provider>
  );
};

ThemeProvider.propTypes = {
  children: PropTypes.node.isRequired,
};

3. 验证修复结果 #

修改后，App组件中使用ThemeProvider包裹子组件的写法就不会再触发TypeScript错误，同时主题切换后的本地存储也能正确同步。

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