TypeScript编译错误TS2339：如何处理string|ReactElement的props访问问题

问题场景 #

编译时出现以下错误：

src/components/NTableBody/index.tsx:110:68 - error TS2339: Property 'props' does not exist on type 'string | ReactElement<any, string | JSXElementConstructor<any>>'.
  Property 'props' does not exist on type 'string'.

相关代码及类型定义：
组件逻辑代码：

(currentCellData.ellipsis && currentCellData.renderValue.props.children ? (
        <NTooltip key={index} title={currentCellData.renderValue} arrow placement="top-start">
          {renderTableCell}
        </NTooltip>
      ) : (
        <Fragment key={index}>{renderTableCell}</Fragment>
      ))

类型定义：

declare type TValue = {
    renderValue: string | React.ReactElement;
    onClick?: (e: React.MouseEvent<HTMLTableCellElement>) => void;
    ellipsis?: boolean;
};

问题核心：renderValue是string | React.ReactElement联合类型，直接访问props时TypeScript会提示string类型无该属性，且不能修改这个类型定义（其他组件依赖）。

解决方法 #

1. 使用typeof类型守卫区分类型

通过typeof判断renderValue是否为string，只在它是ReactElement时访问props：

(currentCellData.ellipsis && 
 typeof currentCellData.renderValue !== 'string' && 
 currentCellData.renderValue.props.children ? (
        <NTooltip key={index} title={currentCellData.renderValue} arrow placement="top-start">
          {renderTableCell}
        </NTooltip>
      ) : (
        <Fragment key={index}>{renderTableCell}</Fragment>
      ))

TypeScript会在typeof ... !== 'string'的分支里自动将renderValue推断为React.ReactElement，允许安全访问props。

2. 使用类型断言强制指定类型

如果业务逻辑能确保当前场景下renderValue一定是ReactElement（比如ellipsis为true时仅传入元素），可以用类型断言跳过类型检查：

(currentCellData.ellipsis && 
 (currentCellData.renderValue as React.ReactElement).props.children ? (
        <NTooltip key={index} title={currentCellData.renderValue} arrow placement="top-start">
          {renderTableCell}
        </NTooltip>
      ) : (
        <Fragment key={index}>{renderTableCell}</Fragment>
      ))

注意：这种方法需确保业务逻辑的准确性，否则可能引发运行时错误。

3. 结合可选链优化判断

如果props.children可能不存在，可加上可选链避免运行时错误，同时配合类型守卫：

(currentCellData.ellipsis && 
 typeof currentCellData.renderValue !== 'string' && 
 currentCellData.renderValue.props?.children ? (
        <NTooltip key={index} title={currentCellData.renderValue} arrow placement="top-start">
          {renderTableCell}
        </NTooltip>
      ) : (
        <Fragment key={index}>{renderTableCell}</Fragment>
      ))

可选链?.会在props为undefined时直接返回undefined，避免报错。

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