如何让TypeScript识别RenderIf组件的&&校验，处理undefined值

云上老周

2026-7-3

修复RenderIf组件的TypeScript类型推断问题

在React项目从JS迁移到TS时，RenderIf组件遇到的TS18049错误，本质是TypeScript无法将组件的condition校验逻辑与children的类型推断关联起来——直接用&&时TS能做控制流分析，但组件接收的children是预定义的ReactNode，TS无法识别组件内部的条件判断对children中变量的影响。

错误写法示例

这种写法无法让TS推断出condition为真时变量的存在性：

type RenderIfProps = {
  condition: boolean;
  children: React.ReactNode;
};

const RenderIf = ({ condition, children }: RenderIfProps) => {
  return condition ? <>{children}</> : null;
};

// 使用时会报错：user可能为undefined
const user: { name: string } | undefined = getUser();
<RenderIf condition={user}>
  <div>{user.name}</div>
</RenderIf>

正确解决方案：使用函数式Children

通过将children定义为函数，延迟执行内容渲染，让TS能通过泛型和条件类型推断出condition为真时的变量类型：

import React from 'react';

// 泛型T标记condition的类型，自动排除null/undefined
type RenderIfProps<T = unknown> = {
  condition: T | null | undefined;
  children: (value: NonNullable<T>) => React.ReactNode;
};

const RenderIf = <T,>({ condition, children }: RenderIfProps<T>) => {
  if (condition != null) {
    return <>{children(condition as NonNullable<T>)}</>;
  }
  return null;
};

使用示例

// 变量可能为undefined/Null的场景
const user: { name: string } | undefined = getUser();
<RenderIf condition={user}>
  {/* TS能推断出这里的user一定是非空的 */}
  {(user) => <div>用户名：{user.name}</div>}
</RenderIf>

// 纯布尔条件的场景
const isLoggedIn = checkAuth();
<RenderIf condition={isLoggedIn}>
  {() => <button>退出登录</button>}
</RenderIf>