使用forwardRef的Box组件TypeScript类型错误：所有props需为布尔值

我创建了一个名为Box的应用容器组件，定义了BoxProps接口如下：

interface BoxProps {
  keyId?: number;
  id?: string;
  propsRef?: React.ForwardedRef<HTMLDivElement>;
  span?: number | number[];
  rowSpan?: number | number[];
  center?: boolean;
  textAlign?: string;
  vertAlign?: string;
  transparent?: string;
  bgColor?: string;
  borderColor?: string;
  gridColumnStart?: number;
  gridColumnEnd?: number;
  classList?: string;
  collapsable?: boolean;
  children: React.ReactNode | JSX.Element | Element;
  styleList?: { [key: string]: string };
  title?: string;
  titleTooltip?: string;
  [key: string]: boolean;
}

const Box = forwardRef<HTMLInputElement, BoxProps>(
  (props, ref) => {
    const {
      keyId,
      id,
      propsRef,
      span,
      rowSpan,
      center,
      textAlign,
      vertAlign,
      transparent,
      bgColor,
      borderColor,
      gridColumnStart,
      gridColumnEnd,
      classList,
      collapsable = false,
      children,
      styleList,
      title,
      titleTooltip
    } = props;

    // ...组件逻辑

    return (
      <div> stuff </div>
    )
  }
)

使用组件时出现错误，提示所有props都应为布尔类型：

// REACT
import React from 'react';
import Box from './Box';
import Description from './Description';

const Recommendations = () => {
    return (
        <Box span={3}>
            <Description data="<h3><img class='margin-right padding-light' src='/assets/nn/images/globe.svg'>Recommendation #1</h3>" />
        </Box>
    )
}

export default Recommendations;

错误信息：

webpack compiled with 6 warnings
ERROR in src/components/elements/Recommendations.tsx:8:14
TS2322: Type 'number' is not assignable to type 'boolean'.
     6 | const Recommendations = () => {
     7 |     return (
  >  8 |         <Box span={3}>
       |              ^^^^
     9 |             <Description data="<h3><img class='margin-right padding-light' src='/assets/nn/images/globe.svg'>Recommendation #1</h3>" />
    10 |         </Box>
    11 |     )

ERROR in src/components/elements/Recommendations.tsx:9:13
TS2322: Type 'Element' is not assignable to type 'boolean'.
     7 |     return (
     8 |         <Box span={3}>
  >  9 |             <Description data="<h3><img class='margin-right padding-light' src='/assets/nn/images/globe.svg'>Recommendation #1</h3>" />
       |             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    10 |         </Box>
    11 |     )
    12 | }

我期望组件能正确识别BoxProps的类型且无类型错误，请问哪里出错了？

错误根源 #

问题出在BoxProps接口的索引签名[key: string]: boolean——TypeScript中，索引签名会强制要求接口内所有属性的类型必须兼容索引签名的类型（这里是boolean）。但你定义的span（number | number[]）、children（React节点类型）等属性都和boolean不兼容，因此触发类型报错。

另外，forwardRef的泛型参数也存在错误：第一个参数是ref对应的元素类型，你的组件返回的是div，但你写的是HTMLInputElement，类型不匹配。

修正步骤及代码示例 #

1. 移除错误的索引签名，通过继承React.HTMLAttributes<HTMLDivElement>获得div的标准属性支持，避免手动重复定义。
2. 修正forwardRef的泛型参数，确保ref类型与组件返回的元素一致。
3. 优化props解构，分离自定义属性与标准HTML属性。

修正后的代码：

import React, { forwardRef, ForwardedRef } from 'react';

// 继承div的标准属性，添加自定义属性
interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {
  keyId?: number;
  propsRef?: ForwardedRef<HTMLDivElement>;
  span?: number | number[];
  rowSpan?: number | number[];
  center?: boolean;
  vertAlign?: string;
  transparent?: string;
  bgColor?: string;
  borderColor?: string;
  gridColumnStart?: number;
  gridColumnEnd?: number;
  classList?: string;
  collapsable?: boolean;
  styleList?: { [key: string]: string };
  title?: string;
  titleTooltip?: string;
}

// 泛型参数：第一个是ref对应的div元素类型，第二个是props类型
const Box = forwardRef<HTMLDivElement, BoxProps>((props, ref) => {
  const {
    keyId,
    propsRef,
    span,
    rowSpan,
    center,
    vertAlign,
    transparent,
    bgColor,
    borderColor,
    gridColumnStart,
    gridColumnEnd,
    classList,
    collapsable = false,
    styleList,
    title,
    titleTooltip,
    // 剩余的标准HTML属性，直接传递给div
    ...restProps
  } = props;

  // 这里编写你的组件逻辑

  return <div ref={ref} {...restProps}> {/* 组件内容 */}</div>;
});

export default Box;

说明 #

• 继承React.HTMLAttributes<HTMLDivElement>后，组件自动支持所有div的标准属性（如id、className、style等），无需手动定义，也不需要索引签名。
• 修正后的forwardRef泛型确保ref与组件返回的元素类型匹配，避免潜在的类型问题。
• 移除索引签名后，TypeScript会正确识别每个自定义props的类型，不再强制所有props为布尔类型。

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