React条件渲染报错：Type '0 | Element | undefined'无法赋值给Element

你的问题出在initials?.length && <Header initials={initials} />这个返回语句上：

• 当initials存在但长度为0时，initials.length等于0，逻辑与运算会直接返回0，而React组件要求返回JSX.Element | null | undefined，0不符合这个类型，所以TypeScript报错。
• 另外如果initials是null，initials?.length会是undefined，同样不符合返回类型要求。

下面是几种正确的实现方式：

方法1：显式判断数组长度大于0 #

直接判断initials?.length > 0，确保只有当数组存在且有元素时才渲染组件，否则返回false（React会将false视为null处理）：

export const Home: FC = (): JSX.Element => {
  const [initials, setInitials] = useState<InitialProps[] | null>(null);
  useEffect(() => setInitials(initialInitialPropsSchema), []);
  return initials?.length > 0 && <Header initials={initials} />;
};

方法2：使用三元表达式明确返回值 #

用三元表达式清晰指定两种情况的返回值，避免隐式类型问题：

export const Home: FC = (): JSX.Element => {
  const [initials, setInitials] = useState<InitialProps[] | null>(null);
  useEffect(() => setInitials(initialInitialPropsSchema), []);
  return initials?.length ? <Header initials={initials} /> : null;
};

方法3：添加类型断言（不推荐） #

如果确定initials在渲染时不会是null且长度不为0，可以用类型断言，但这种方式不够安全，除非你能确保状态的可靠性：

export const Home: FC = (): JSX.Element => {
  const [initials, setInitials] = useState<InitialProps[] | null>(null);
  useEffect(() => setInitials(initialInitialPropsSchema), []);
  return (initials?.length && <Header initials={initials as InitialProps[]} />) as JSX.Element;
};

优先推荐前两种方法，它们更符合React和TypeScript的类型规范，代码可读性也更强。

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