React使用forwardRef的组件配置propTypes报TS2345错误如何解决？

这个TS报错的核心原因有两点：

• React的forwardRef要求传入的参数是ForwardRefRenderFunction类型，该类型定义中没有预留propTypes属性，你直接给传入forwardRef的原始渲染函数挂载propTypes，会导致类型不匹配，TS校验不通过。
• 你最终导出的是forwardRef执行后返回的新组件，给原始渲染函数挂载的propTypes本身也不会生效，只有挂载到最终导出的包装后组件上的propTypes才会被React识别。

调整propTypes的挂载位置，先接收forwardRef返回的组件实例，再给这个实例挂载propTypes即可，修改后的代码如下：

// MovieSearchResults
import { forwardRef } from 'react';
import PropTypes from 'prop-types';

// 原始渲染函数不需要加propTypes
const MovieSearchResultList = ({toggle}, ref) => {
  return (
    <ResultListBackground
      onClick={toggle}
    >
      {/* 组件内容 */}
    </ResultListBackground>
  )
}

// 先接收forwardRef返回的包装后组件
const ForwardedMovieSearchResultList = forwardRef(MovieSearchResultList);

// 给包装后的组件挂载propTypes
ForwardedMovieSearchResultList.propTypes = {
  toggle: PropTypes.func,
};

export default ForwardedMovieSearchResultList;

如果是TS项目，更推荐同时给组件添加TS类型声明来做编译时类型校验，写法如下：

// 定义组件props的TS类型
interface MovieSearchResultListProps {
  toggle?: () => void;
}
// 定义ref指向的DOM元素类型，这里以div为例，可根据实际情况替换
type RefType = HTMLDivElement;

const MovieSearchResultList = ({toggle}: MovieSearchResultListProps, ref: React.Ref<RefType>) => {
  return (
    <ResultListBackground
      ref={ref}
      onClick={toggle}
    >
      {/* 组件内容 */}
    </ResultListBackground>
  )
}

// 给forwardRef传入泛型，指定ref和props的类型
const ForwardedMovieSearchResultList = forwardRef<RefType, MovieSearchResultListProps>(MovieSearchResultList);

ForwardedMovieSearchResultList.propTypes = {
  toggle: PropTypes.func,
};

export default ForwardedMovieSearchResultList;

修改后即可消除TS报错，同时propTypes也能正常生效。

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