React+IBM Carbon中TableHeaderProps类型不兼容问题求助

我是TypeScript新手，在React项目里用IBM Carbon库实现DataTable和TreeView的切换功能，写这段代码时遇到类型错误：

<TableHeader {...getHeaderProps({ header })} key={header.key}>
  {header.header}
</TableHeader>

错误信息：

'Type '{ children: ReactNode; key: string; isSortable: boolean | undefined; isSortHeader: boolean; onClick: (e: MouseEvent) => void; sortDirection: DataTableSortState; }' is not assignable to type 'TableHeaderProps'.
Types of property 'onClick' are incompatible.
Type '(e: MouseEvent) => void' is not assignable to type 'MouseEventHandler'.
Types of parameters 'e' and 'event' are incompatible.
Type 'MouseEvent<HTMLButtonElement, MouseEvent>' is missing the following properties from type 'MouseEvent': layerX, layerY, offsetX, offsetY, and 16 more.'

错误原因 #

• 类型冲突：getHeaderProps返回的onClick事件参数是React.MouseEvent<HTMLButtonElement>，但TypeScript误将其推断为全局DOM原生的MouseEvent，两者属性不匹配，导致类型不兼容。
• 导入缺失：代码未显式导入React的MouseEvent类型，TypeScript自动使用全局DOM事件类型，和Carbon组件要求的React包装事件类型不符。

解决方法 #

方案1：显式导入React事件类型（推荐） #

在React导入语句中添加MouseEvent，明确指定事件类型，让TypeScript正确识别：

import React, { MouseEvent } from 'react';

方案2：类型断言（备选） #

如果不想修改导入，可以通过类型断言强制兼容，但不推荐作为首选：

<TableHeader {...(getHeaderProps({ header }) as TableHeaderProps)} key={header.key}>
  {header.header}
</TableHeader>

修正后的完整代码 #

import React, { MouseEvent } from 'react';
import TreeView from '@carbon/react/lib/components/TreeView/TreeView';
import TreeNode from '@carbon/react/lib/components/TreeView/TreeNode';
import { Document } from '@carbon/icons-react';
import { DataTable, Table, TableBody, TableCell, TableContainer, TableHead, TableHeader, TableRow } from '@carbon/react';
import Button from '@carbon/react/lib/components/Button/Button';

const headers = [
  { key: 'name', header: 'Name' },
  { key: 'path', header: 'Path' },
  { key: 'description', header: 'Description' },
];

const rows = [
  { id: 'node-1', name: 'Node 1', path: 'Root', description: 'Activity for Sales scenario' },
  { id: 'node-1-1', name: 'Node 1.1', path: 'Root/Node 1', description: 'Activity for Sales scenario' },
  { id: 'node-2', name: 'Node 2', path: 'Root', description: 'Activity for Sales scenario' },
  { id: 'node-3', name: 'Node 3', path: 'Root', description: 'Activity for Sales scenario' },
  { id: 'node-3-1', name: 'Node 3.1', path: 'Root/Node 3', description: 'Activity for Sales scenario' },
  { id: 'node-3-2', name: 'Node 3.2', path: 'Root/Node 3', description: 'Activity for Sales scenario' },
  { id: 'node-3-3', name: 'Node 3.3', path: 'Root/Node 3', description: 'Activity for Sales scenario' },
  { id: 'node-4', name: 'Node 4', path: 'Root', description: 'Activity for Sales scenario' },
  { id: 'node-4-1', name: 'Node 4.1', path: 'Root/Node 4', description: 'Activity for Sales scenario' },
  { id: 'node-4-2', name: 'Node 4.2', path: 'Root/Node 4', description: 'Activity for Sales scenario' },
  { id: 'node-4-2-1', name: 'Node 4.2.1', path: 'Root/Node 4/Node 4.2', description: 'Activity for Sales scenario' },
  { id: 'node-4-3', name: 'Node 4.3', path: 'Root/Node 4', description: 'Activity for Sales scenario' },
];

interface TreeNodeComponentProps {
  selectedNodes: string[];
  handleSelect: (event: { id: string }) => void;
  toggleNode3Expansion: () => void;
  isNode3Expanded: boolean;
}

const TreeNodeComponent: React.FC<TreeNodeComponentProps> = ({
  selectedNodes,
  handleSelect,
  toggleNode3Expansion,
  isNode3Expanded,
}) => {
  const [showDataTable, setShowDataTable] = React.useState<boolean>(false);

  const toggleView = () => {
    setShowDataTable(!showDataTable);
  };

  return (
    <div>
      <Button kind="secondary" onClick={toggleView}>
        {showDataTable ? 'Show Tree View' : 'Show Data Table'}
      </Button>
      {showDataTable ? (
        <DataTable rows={rows.filter(row => selectedNodes.includes(row.id))} headers={headers}>
          {({ rows, headers, getHeaderProps, getRowProps }) => (
            <TableContainer>
              <Table>
                <TableHead>
                  <TableRow>
                    {headers.map(header => (
                      <TableHeader {...getHeaderProps({ header })} key={header.key}>
                        {header.header}
                      </TableHeader>
                    ))}
                  </TableRow>
                </TableHead>
                <TableBody>
                  {rows.map(row => (
                    <TableRow {...getRowProps({ row })} key={row.id}>
                      {row.cells.map(cell => (
                        <TableCell key={cell.id}>{cell.value}</TableCell>
                      ))}
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </TableContainer>
          )}
        </DataTable>
      ) : (
        <TreeView selected={selectedNodes} onSelect={handleSelect}>
          <TreeNode id="node-1" label={<><Document /> Node 1</>} isExpanded>
            <TreeNode id="node-1-1" label="Node 1.1" />
          </TreeNode>
          <TreeNode id="node-2" label={<><Document /> Node 2</>} />
          <TreeNode id="node-3" label={<><Document /> Node 3</>} isExpanded={isNode3Expanded}>
            <TreeNode id="node-3-1" label="Node 3.1" />
            <TreeNode id="node-3-2" label="Node 3.2" />
            <TreeNode id="node-3-3" label="Node 3.3" disabled />
          </TreeNode>
          <TreeNode id="node-4" label={<><Document /> Node 4</>} isExpanded>
            <TreeNode id="node-4-1" label="Node 4.1" disabled />
            <TreeNode id="node-4-2" label="Node 4.2">
              <TreeNode id="node-4-2-1" label="Node 4.2.1" />
            </TreeNode>
            <TreeNode id="node-4-3" label="Node 4.3" disabled />
          </TreeNode>
        </TreeView>
      )}
    </div>
  );
};

export default TreeNodeComponent;

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