React泛型组件中useState的TypeScript类型赋值错误解决

问题分析 #

你遇到的错误Argument of type '{}' is not assignable to parameter of type 'T | (() => T)'核心原因是：TypeScript无法保证空对象{}符合泛型T的结构约束。即便添加T extends object，object涵盖所有非原始类型，但{}依然可能不匹配具体的T（比如T是{username: string}时，{}缺少必填的username属性）。

解决方案 #

针对你需要T为深度嵌套JSON对象的需求，提供三种可行方案：

方案1：通过Props传入初始值（最安全） #

让父组件传入符合T结构的初始配置值，彻底规避类型不匹配问题：

import { useState } from 'react';

// 定义组件Props，包含初始配置项
type SomeComponentProps<T> = {
  children: React.ReactNode;
  initialConfig: T;
};

// 泛型组件接收初始值并初始化状态
function SomeComponent<T>({ children, initialConfig }: SomeComponentProps<T>) {
  const [configuration, setConfiguration] = useState<T>(initialConfig);
  
  // 后续正常使用configuration与setConfiguration即可
  return <div>{children}</div>;
}

// 使用示例
const App = () => {
  return (
    <SomeComponent 
      initialConfig={{ 
        user: { name: 'Alice', age: 30 }, 
        settings: { theme: 'dark', notifications: true } 
      }}
    >
      {/* 子组件内容 */}
    </SomeComponent>
  );
};

优点：类型完全安全，无需额外断言，初始值结构由使用方控制，适配所有JSON结构的T。

方案2：使用类型断言（适合确定后续会填充完整值的场景） #

如果必须在组件内部初始化空对象，可通过as T类型断言告知TypeScript信任你的类型判断，但需注意运行时风险（若后续未正确填充T的属性，可能出现未定义错误）：

import { useState } from 'react';

// 定义JSON对象的类型约束，覆盖深度嵌套场景
type JsonValue = string | number | boolean | null | JsonObject | JsonArray;
interface JsonObject { [key: string]: JsonValue; }
interface JsonArray extends Array<JsonValue> {}

type SomeComponentProps = {
  children: React.ReactNode;
};

// 泛型组件约束T为JSON对象
function SomeComponent<T extends JsonObject>({ children }: SomeComponentProps) {
  const [configuration, setConfiguration] = useState<T>({} as T);
  
  // 务必确保后续通过setConfiguration传入符合T结构的值
  return <div>{children}</div>;
}

注意：仅当你能保证configuration会被更新为完整的T类型时使用此方案。

方案3：使用Partial允许初始空值 #

如果初始状态可以是不完整的T，后续逐步填充属性，可将Partial<T>作为初始状态类型：

import { useState } from 'react';

type JsonValue = string | number | boolean | null | JsonObject | JsonArray;
interface JsonObject { [key: string]: JsonValue; }
interface JsonArray extends Array<JsonValue> {}

type SomeComponentProps = {
  children: React.ReactNode;
};

function SomeComponent<T extends JsonObject = JsonObject>({ children }: SomeComponentProps) {
  // 初始状态为Partial<T>，允许空对象
  const [configuration, setConfiguration] = useState<Partial<T>>({});
  
  // 如需设置完整的T类型值，可定义专用方法
  const setFullConfiguration = (config: T) => {
    setConfiguration(config);
  };
  
  return <div>{children}</div>;
}

优点：既保留类型安全，又允许初始空值，适合动态填充配置的场景。

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