TypeScript报错：类型缺少必填tableData属性，已设默认Props仍异常

这个报错的核心是组件的Props类型定义和FC泛型的使用不匹配，加上必填属性和defaultProps的逻辑矛盾：

1. 你用了FC（FunctionComponent）但没有传入对应的Props泛型参数，导致TypeScript默认认为你的Table组件只接受{ children?: ReactNode }这一种Props，但你在组件参数里解构了tableData，这就造成了类型不匹配。
2. 你把tableData定义为必填属性（在{ tableData: TableData; }里没有加?），但又给它设置了defaultProps——这本身逻辑矛盾：如果是必填项，就不需要默认值；如果需要默认值，属性应该设为可选。

方案一：使用函数参数默认值（推荐，现代React/TS写法） #

这种写法类型推断更清晰，也符合React官方现在的推荐方向：

import React, { FC } from 'react';

interface TableData {
  someField: string;
  anotherField?: string;
  someFunction?: () => void; // 建议用具体的函数类型代替模糊的Function
}

// 提前定义默认的tableData值
const defaultTableData: TableData = {
  someField: 'field1',
  anotherField: 'field2',
  someFunction: () => console.log('Some function')
};

// 定义组件Props类型，把tableData设为可选
interface TableProps {
  tableData?: TableData;
}

// 给FC传入Props泛型，同时在参数里设置默认值
const Table: FC<TableProps> = ({ tableData = defaultTableData }) => {
  const { someField, anotherField, someFunction } = tableData;
  // ... 你的组件逻辑
  return <div>{someField}</div>;
};

方案二：修正defaultProps的类型关联 #

如果你坚持要用defaultProps，需要让TypeScript识别到必填属性有默认值兜底：

import React, { FC } from 'react';

interface TableData {
  someField: string;
  anotherField?: string;
  someFunction?: () => void;
}

interface TableProps {
  tableData: TableData; // 保持必填定义
}

// 给FC传入正确的Props泛型
const Table: FC<TableProps> = ({ tableData: { someField, anotherField, someFunction } }) => {
  // ... 你的组件逻辑
  return <div>{someField}</div>;
};

// 用Partial<TableProps>让TS接受默认值的类型兼容
Table.defaultProps = {
  tableData: {
    someField: 'field1',
    anotherField: 'field2',
    someFunction: () => console.log('Some function')
  }
} as Partial<TableProps>;

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