React forwardRef在TypeScript中如何正确定义多Props类型？

问题根源 #

你犯了两个关键错误：

• 把ref字段放进了FooProps接口，但forwardRef的ref是独立于props的第二个参数，不属于props的一部分
• 解构props时错误地尝试取出ref，同时泛型参数的使用语法有误

正确写法 #

首先修正FooProps，移除多余的ref字段：

import { forwardRef, JSX } from 'react';

interface FooProps {
    children: JSX.Element;
    id?: string;
    error?: boolean;
    width?: number;
}

然后使用forwardRef的正确泛型语法，明确指定Ref类型和Props类型，组件函数接收props和ref两个独立参数：

const Foo = forwardRef<HTMLUListElement, FooProps>((props, ref) => {
    const { children, id, error, width } = props;
    
    return (
        <ul
            id={id}
            ref={ref}
            style={{ 
                width: width, 
                backgroundColor: error ? 'red' : 'green' 
            }}
        >
            {children}
        </ul>
    );
});

export default Foo;

说明 #

• 泛型参数顺序是forwardRef<RefType, PropsType>，这里HTMLUListElement是<ul>元素的DOM类型，替换成你实际需要的Ref类型即可（如果不需要具体DOM类型，也可以用any，但推荐用具体类型）
• 组件函数的第一个参数是完整的props，类型为FooProps，第二个参数是独立的ref，无需从props中解构
• 移除FooProps里的ref字段，避免和forwardRef的独立ref参数冲突

内容的提问来源于stack exchange，提问作者four-eyes