在样式化组件上转发 InnerRef 会导致打字稿错误

Question

将 innerRef 转发到如下所示的样式组件会在打字稿中产生以下类型错误：

interface MenuProps {
  isOpen: boolean
}

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

const Menu = React.forwardRef((props, ref) => <BaseMenu innerRef={ref} {...props} />)

No overload matches this call.
  Overload 1 of 2, '(props: Omit<Omit<Pick<DetailedHTMLProps<HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "key" | keyof HTMLAttributes<...>> & { ...; } & MenuProps, never> & Partial<...>, "theme"> & { ...; } & { ...; }): ReactElement<...>', gave the following error.
    Type '{ children?: ReactNode; innerRef: ForwardedRef<unknown>; }' is not assignable to type 'IntrinsicAttributes & Omit<Omit<Pick<DetailedHTMLProps<HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "key" | keyof HTMLAttributes<...>> & { ...; } & MenuProps, never> & Partial<...>, "theme"> & { ...; } & { ...; }'.
      Property 'innerRef' does not exist on type 'IntrinsicAttributes & Omit<Omit<Pick<DetailedHTMLProps<HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "key" | keyof HTMLAttributes<...>> & { ...; } & MenuProps, never> & Partial<...>, "theme"> & { ...; } & { ...; }'.
  Overload 2 of 2, '(props: StyledComponentPropsWithAs<"ul", DefaultTheme, MenuProps, never, "ul", "ul">): ReactElement<StyledComponentPropsWithAs<"ul", DefaultTheme, MenuProps, never, "ul", "ul">, string | JSXElementConstructor<...>>', gave the following error.
    Type '{ children?: ReactNode; innerRef: ForwardedRef<unknown>; }' is not assignable to type 'IntrinsicAttributes & Omit<Omit<Pick<DetailedHTMLProps<HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "key" | keyof HTMLAttributes<...>> & { ...; } & MenuProps, never> & Partial<...>, "theme"> & { ...; } & { ...; }'.
      Property 'innerRef' does not exist on type 'IntrinsicAttributes & Omit<Omit<Pick<DetailedHTMLProps<HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "key" | keyof HTMLAttributes<...>> & { ...; } & MenuProps, never> & Partial<...>, "theme"> & { ...; } & { ...; }'.ts(2769)

我也尝试删除 isOpen 并键入 interface，但都导致相同的错误。

更新

出现错误的代码沙盒文件：https://codesandbox.io/s/purple-silence-idz52?file=/src/Menu.tsx

Answer 1

因为ul 标记没有属性innerRef。只需将innerRef 更改为ref

你应该像这样为 ref 和 props 添加类型：

const Menu = React.forwardRef<HTMLUListElement, MenuProps>((props, ref) => (
  <BaseMenu ref={ref} {...props} />
));

https://codesandbox.io/s/nervous-violet-l7xb1?file=/src/Menu.tsx