使用forwardRef传ref遇TypeScript错误：ref属性不在对应类型中

错误原因 #

你用FC<ResultsConnectedProps>标注forwardRef返回的组件，但FC类型不包含ref属性的定义，TypeScript因此判定传递ref属性不符合组件的props类型规范。

修复方案 #

1. 定义ref暴露的接口 #

先明确组件通过useImperativeHandle暴露给父组件的方法类型：

// 定义ref可调用的方法集合
interface ResultsConnectedHandle {
  runQuery: () => void;
}

2. 修正组件的类型标注 #

不要使用FC类型，而是通过forwardRef的泛型参数明确ref和props的类型，让TypeScript自动推导组件类型：

interface ResultsConnectedProps {
  sql: string;
}

interface ResultsConnectedHandle {
  runQuery: () => void;
}

// forwardRef泛型参数顺序：ref类型在前，props类型在后
export const ResultsConnected = forwardRef<ResultsConnectedHandle, ResultsConnectedProps>(({ sql }, ref) => {
  const [lastUpdateAt, setLastUpdateAt] = useState(0);

  useImperativeHandle(ref, () => ({
    runQuery: () => {
      setLastUpdateAt(Date.now());
    },
  }));

  // ... 其他组件逻辑
  return <div>查询结果组件</div>;
});

3. 父组件中指定ref的类型 #

在父组件里给useRef指定正确的类型，避免类型模糊：

const resultsRef = useRef<ResultsConnectedHandle | null>(null);

// 调用组件
<ResultsConnected ref={resultsRef} sql={sql} />

关键说明 #

• forwardRef的泛型参数顺序固定为ref类型在前、props类型在后，这是TypeScript识别ref属性的关键。
• 用FC标注forwardRef组件会丢失ref的类型信息，属于常见的TypeScript使用误区。
• 显式定义ResultsConnectedHandle能让TypeScript在调用ref方法时做严格的类型检查，避免潜在的运行时错误。

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