TypeScript React：isValidElement类型守卫未按预期工作的修复

首先明确你的类型定义，先把TooltipCallback和TooltipProp清晰定义出来：

import React from 'react';

type TooltipCallback = () => React.ReactNode;
type TooltipProp = React.ReactNode | TooltipCallback;

问题出在React.isValidElement只能帮你判断传入的是不是React元素，但ReactNode包含字符串、数字、null、undefined等多种类型，TypeScript无法自动推断else分支里的tooltip一定是可调用的回调函数——它依然认为可能是字符串这类不可调用的类型。

解决办法是自定义类型守卫函数，手动判断值是否为TooltipCallback类型，让TypeScript能正确缩小类型范围：

// 自定义类型守卫，判断是否为TooltipCallback
const isTooltipCallback = (value: unknown): value is TooltipCallback => {
  return typeof value === 'function';
};

// 你的Tooltip组件
const Tooltip = ({ tooltip }: { tooltip: TooltipProp }) => {
  let content: React.ReactNode;

  if (React.isValidElement(tooltip)) {
    content = tooltip;
  } else if (isTooltipCallback(tooltip)) {
    // 这里TypeScript已经确定tooltip是可调用的回调
    content = tooltip();
  } else {
    // 处理字符串、数字等其他ReactNode类型
    content = tooltip;
  }

  return <div className="tooltip-container">{content}</div>;
};

如果你想简化写法，也可以在调用前用类型断言，但这种方式不如类型守卫安全（如果传入了非函数非React元素的ReactNode，会导致运行时错误）：

const Tooltip = ({ tooltip }: { tooltip: TooltipProp }) => {
  const content = React.isValidElement(tooltip) 
    ? tooltip 
    : (tooltip as TooltipCallback)();
  return <div className="tooltip-container">{content}</div>;
};

推荐用第一种类型守卫的方式，既能让TypeScript正确推断类型，又能处理所有ReactNode的子类型，避免运行时风险。

内容的提问来源于stack exchange，提问作者M.A Shahbazi