React 18.X中Radix-UI Select的forwardRef类型错误解决

首先明确：React 18 完全支持 React.forwardRef，所谓“不再支持”的说法是错误的，这个 API 至今仍是 React 中传递 ref 的标准方式之一。

你遇到的 TypeScript 错误，核心原因是用 forwardRef 包裹组件时，没有给组件的 props 定义正确的类型——默认情况下 props 的类型是 {}，TypeScript 自然识别不到 children 属性。

解决错误并正确封装 Radix-UI Select #

如果你是在封装 Radix-UI 的 Select 组件，需要给 forwardRef 传入正确的 props 类型（包含 children），示例代码如下：

import React, { forwardRef, PropsWithChildren } from 'react';
import * as Select from '@radix-ui/react-select';

// 定义组件的 props 类型，用 PropsWithChildren 自动包含 children
type CustomSelectProps = PropsWithChildren<{
  // 这里可以添加你自定义的 props，比如 placeholder、disabled 等
  placeholder?: string;
  disabled?: boolean;
}>;

const CustomSelect = forwardRef<HTMLDivElement, CustomSelectProps>(
  ({ children, placeholder, disabled }, ref) => {
    return (
      <Select.Root disabled={disabled} ref={ref}>
        <Select.Trigger placeholder={placeholder}>
          {children}
        </Select.Trigger>
        <Select.Portal>
          <Select.Content>
            <Select.Viewport>
              {/* 这里可以放 Select.Item 等子组件 */}
              {children}
            </Select.Viewport>
          </Select.Content>
        </Select.Portal>
      </Select.Root>
    );
  }
);

export default CustomSelect;

直接使用原生 Radix-UI Select #

如果你不需要封装，直接使用 Radix-UI 的原生组件，根本不需要自己写 forwardRef，直接按官方文档写就行，不会有类型问题：

import * as Select from '@radix-ui/react-select';

function App() {
  return (
    <Select.Root>
      <Select.Trigger placeholder="Select a fruit">
        <Select.Value />
      </Select.Trigger>
      <Select.Portal>
        <Select.Content>
          <Select.Viewport>
            <Select.Item value="apple">Apple</Select.Item>
            <Select.Item value="banana">Banana</Select.Item>
            <Select.Item value="orange">Orange</Select.Item>
          </Select.Viewport>
        </Select.Content>
      </Select.Portal>
    </Select.Root>
  );
}

关键注意点 #

• 当用 forwardRef 时，一定要明确 props 的类型：要么用 PropsWithChildren 包裹自定义 props，要么显式在类型中声明 children: React.ReactNode。
• Radix-UI 的组件本身已经处理了 ref 传递，只有当你要给封装后的组件传递 ref 时，才需要用 forwardRef。

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