React TypeScript使用ForwardRef开发DataList组件出现ref属性不存在类型报错

当前类型错误的核心来源是对React.forwardRef返回值的错误类型标注：
在定义DataList组件时，你额外为组件叠加了React.FC<Props>的类型约束。该类型是为无ref转发能力的普通函数组件设计的，其定义的props集合会完全剥离ref相关属性——这和React 19版本之前“普通函数组件无法直接接收ref参数”的运行时规则匹配。
当你把React.FC<Props>硬套在React.forwardRef的返回值上时，TS会给组件加上一层“不支持ref属性”的类型外壳。哪怕forwardRef本身的底层类型和运行时逻辑支持接收ref，外层的错误标注也会让TS校验传参时报“ref属性不存在”的错误。

• 移除DataList组件定义上多余的React.FC<Props>类型标注，直接依赖React.forwardRef的泛型参数完成类型推导，不需要额外叠加FC类型。修正后的DataList代码如下：

  interface Props extends TestId {
    focusedItemId?: string;
    children?: React.ReactNode;
  }
  
  // 移除原有的 : React.FC<Props> 标注，直接使用forwardRef的泛型推导
  const DataList = React.forwardRef<HTMLUListElement, Props>(
    ({ children, focusedItemId, testId }, ref) => {
      return (
        <ul
          aria-activedescendant={focusedItemId}
          data-test-id={testId}
          ref={ref}
        >
          {children}
        </ul>
      );
    },
  );
  

• （可选）如果需要显式标注组件类型而不依赖自动推导，需使用forwardRef对应的原生类型，而非React.FC。该类型天生自带ref属性的类型支持：

  const DataList: React.ForwardRefExoticComponent<
    React.PropsWithoutRef<Props> & React.RefAttributes<HTMLUListElement>
  > = React.forwardRef<HTMLUListElement, Props>(
    ({ children, focusedItemId, testId }, ref) => {
      // 组件内部逻辑保持不变
    }
  );
  

• 完成修改后，回到DataListContainer组件中给DataList传递listRef的逻辑，TS会正确识别ref参数的合法性，原有类型报错会完全消失。
  如需实现<DataList.List />、<DataList.Item />的组合式调用结构，只需给外层Container组件挂载静态属性即可：

  const DataListContainer: React.FC = ({ children }) => {
    const listRef = useRef<HTMLUListElement>(null);
    return <DataList ref={listRef}>{children}</DataList>;
  };
  
  // 挂载静态子组件，实现组合式API
  DataListContainer.List = DataList;
  DataListContainer.Item = ListItem; // 你的ListItem组件按照相同的forwardRef类型规则定义即可
  

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