React TypeScript中「Expression produces union too complex to represent」错误求助

问题原因 #

你遇到的「Expression produces union too complex to represent」错误，本质是因为Wrapper被定义为keyof JSX.IntrinsicElements——这是所有HTML原生元素的联合类型，每个元素对应的ref类型各不相同。TypeScript在尝试推导这个超大联合类型的ref兼容关系时，超过了自身的类型处理上限，所以抛出这个错误。

可行解决方案 #

方案1：缩小允许的容器元素范围 #

不需要支持所有HTML元素，只限定为常用的容器类型（比如div、section、article等），这样联合类型的规模大幅缩小，TypeScript能轻松处理：

修改类型定义：

type StarRatingProps = {
  number?: number;
  offCol?: string;
  onCol?: string;
  // 只允许指定常用容器元素
  el?: 'div' | 'section' | 'article' | 'span';
  style?: CSSProperties;
}

方案2：使用泛型精确匹配ref类型 #

通过泛型让StarRating组件的容器元素类型和ref类型严格对应，彻底消除联合类型歧义：

import { useState, useRef, CSSProperties } from 'react';

// 用泛型约束Wrapper的类型
type StarRatingProps<T extends keyof JSX.IntrinsicElements> = {
  number?: number;
  offCol?: string;
  onCol?: string;
  el?: T;
  style?: CSSProperties;
}

const defaultStarStyles = {
  width: '50px',
  height: '50px',
}

// 组件接收泛型参数
export const StarRating = <T extends keyof JSX.IntrinsicElements = 'div'>({
  number = 5,
  offCol = 'black',
  onCol = 'yellow',
  el: Wrapper = 'div' as T,
  style = defaultStarStyles,
}: StarRatingProps<T>) => {
  const items = Array.from({ length: number });
  const [currentCol, setCurrentCol] = useState<string>(offCol);
  // 根据Wrapper的类型获取对应的元素类型
  const parent = useRef<JSX.IntrinsicElements[T] extends { ref?: infer R } ? R extends React.RefObject<infer E> ? E : never : never>(null);

  const starHover = (index: number) => {
    
  }

  return(
    <Wrapper ref={parent}>
      {items.map((_, index) => (
        <svg key={index} style={style} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"
        onMouseOver={() => starHover(index)}>
          <path fill={currentCol} d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 
          150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 
          329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 
          68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 
          225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z"/>
        </svg>
      ))}
    </Wrapper>
  );
}

方案3：类型断言快速解决（适合临时场景） #

如果不想修改组件结构，可以直接对ref进行类型断言，告诉TypeScript当前Wrapper对应的元素类型：

// 保持原有Props定义不变
export const StarRating = ({
  number = 5,
  offCol = 'black',
  onCol = 'yellow',
  el: Wrapper = 'div',
  style = defaultStarStyles,
}: StarRatingProps) => {
  const items = Array.from({ length: number });
  const [currentCol, setCurrentCol] = useState<string>(offCol);
  // 断言为HTMLElement，忽略联合类型差异
  const parent = useRef<HTMLElement>(null);

  const starHover = (index: number) => {
    
  }

  return(
    // 这里添加类型断言，告诉TS Wrapper的ref接受HTMLElement类型
    <Wrapper ref={parent as React.Ref<JSX.IntrinsicElements[typeof Wrapper]>>}>
      {items.map((_, index) => (
        <svg key={index} style={style} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"
        onMouseOver={() => starHover(index)}>
          <path fill={currentCol} d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 
          150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 
          329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 
          68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 
          225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z"/>
        </svg>
      ))}
    </Wrapper>
  );
}

总结 #

推荐优先用方案1或方案2：方案1简单直接，适合不需要支持太多容器类型的场景；方案2类型最严谨，适合需要灵活支持多种容器元素的组件。方案3适合快速临时修复，但要注意如果传入的元素ref类型不是HTMLElement（比如input是HTMLInputElement），可能会有类型不匹配的风险。

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