React自定义ProtectedRoute组件类型标注问题：移除any后编译报错

错误原因 #

你的组件编译报错的核心问题是：React组件作为JSX使用时，返回类型必须严格为JSX.Element | null，而当前代码中props.children的类型是ReactNode——这个类型包含了字符串、数字、undefined等非有效JSX元素类型，导致组件整体返回类型不符合JSX组件的要求，从而抛出TS2786错误。

解决方案 #

1. 限制子元素类型 #

将Props中children的类型从宽泛的ReactNode改为严格的ReactElement或ReactElement[]（路由组件的子元素通常是页面级组件，属于有效JSX元素）。

2. 明确组件返回类型 #

给组件指定返回类型为JSX.Element | null，确保返回值符合JSX组件要求。

修改后的完整代码 #

import { ReactElement } from 'react';
import { useSelector, shallowEqual } from 'react-redux';

// 假设getLoginStatus和NotLogged已正确定义
interface Props {
    children: ReactElement | ReactElement[];
}

export const ProtectedRoute = (props: Props): JSX.Element | null => {
    const isLogged = useSelector(getLoginStatus, shallowEqual);

    if (!isLogged) {
        return <NotLogged />;
    }

    return props.children;
};

为什么之前的尝试无效？ #

• 使用JSX.Element：因为children是ReactNode类型，组件返回类型会变成JSX.Element | ReactNode，仍包含无效类型，无法通过编译。
• 使用ReactNode：该类型包含undefined、字符串等非JSX元素类型，不符合React组件作为JSX使用的返回值要求。
• 使用()=>JSX.Element：这是函数类型，而你返回的是组件实例（<NotLogged />），类型不匹配。

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