给styled-component转发innerRef触发TypeScript类型错误如何解决

错误原因 #

• styled-components v4及以上版本已经废弃了innerRef属性，直接支持标准React ref属性绑定DOM节点，额外传递innerRef会触发属性不存在的类型报错
• React.forwardRef未显式声明泛型，TS无法自动推导ref指向的DOM类型和组件接收的props类型，也会引发类型不匹配

解决方案 #

直接替换innerRef为标准ref，同时给React.forwardRef补充泛型声明即可：

import React from 'react';
import styled, { css } from 'styled-components';

// 继承ul原生属性类型，支持传递className、onClick等原生DOM属性
interface MenuProps extends React.HTMLAttributes<HTMLUListElement> {
  isOpen: boolean;
}

const BaseMenu = styled.ul<MenuProps>`
  padding: 0;
  /* ... 其他样式 ... */
  ${({ isOpen }) =>
    !isOpen &&
    css`
      border: none;
    `}
`;

// 泛型第一个参数为ref指向的DOM元素类型，第二个为组件接收的props类型
const Menu = React.forwardRef<HTMLUListElement, MenuProps>((props, ref) => (
  <BaseMenu ref={ref} {...props} />
));

旧版本兼容说明 #

如果你确实在使用styled-components v3及以下的旧版本，必须使用innerRef，则手动声明属性类型即可：

// 仅适用于styled-components v3及更早版本
const Menu = React.forwardRef<HTMLUListElement, MenuProps>((props, ref) => (
  <BaseMenu innerRef={ref as React.Ref<HTMLUListElement>} {...props} />
));

更推荐升级styled-components到v5/v6稳定版本，避免旧版本的兼容性问题。

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