React组件报错：Objects are not valid as a React child（Promise对象）

错误核心原因 #

你遇到的这个报错本质是React组件不能定义为async函数——async函数的返回值是Promise对象，而React渲染时需要的是ReactNode（比如JSX、字符串、数组这类可渲染元素），直接把Promise当作子元素渲染就会触发这个错误。

你的代码问题分析 #

1. 把DashboardLayout定义成了async函数，违反React组件规则
2. 用useRef存储权限状态是错误的：useRef的变更不会触发组件重渲染，就算权限校验完成，UI也不会更新
3. 混用async/await和.then()，逻辑冗余且容易出现异步时序问题

修复方案及完整代码 #

把组件改成普通函数，用useEffect处理异步逻辑，同时用useState管理状态（触发UI更新），统一用async/await处理请求：

import Footer from "./Footer";
import Header from "./Header";
import Sidebar from "./Sidebar";
import Container from "./Container";
import RedirectLogin from "./redirectlogin";
import { getSession, getPermissions } from "src/controllers/session.controller";
import { useState, useEffect } from "react";

type DashboardLayoutProps = {
    children: React.ReactNode;
};

export default function DashboardLayout({ children }: DashboardLayoutProps) {
    // 用状态管理权限和加载状态
    const [havePermissions, setHavePermissions] = useState(false);
    const [isLoading, setIsLoading] = useState(true);

    useEffect(() => {
        const checkAuthAndPermissions = async () => {
            try {
                // 读取SESSION Cookie
                const cookie = document?.cookie
                    .split("; ")
                    .find((row) => row.startsWith("SESSION="))
                    ?.split("ID=")[1];

                if (!cookie) {
                    setHavePermissions(false);
                    setIsLoading(false);
                    return;
                }

                // 校验会话
                const sessionRes = await getSession({ id: cookie });
                // 获取权限列表
                const permissionsRes = await getPermissions({ id: sessionRes.data.id });
                
                // 检查是否拥有目标模块权限
                const modulePermission = permissionsRes.data.find(
                    (permision: any) => permision.permissionName === "moduleOne"
                );
                
                // 更新权限状态
                setHavePermissions(!!(modulePermission && modulePermission.effect));
            } catch (error) {
                // 处理请求失败场景（会话过期、网络错误等）
                console.error("权限校验失败:", error);
                setHavePermissions(false);
            } finally {
                // 无论成功失败，结束加载状态
                setIsLoading(false);
            }
        };

        checkAuthAndPermissions();
    }, []);

    // 加载过程中可显示加载动画或占位内容
    if (isLoading) {
        return <Container>加载中...</Container>;
    }

    return (
        <Container>
            {havePermissions ? (
                <>
                    <Header />
                    <div className="flex flex-1">
                        <Sidebar />
                        <div className="p-5 w-[80vw] flex-grow">{children}</div>
                    </div>
                    <Footer />
                </>
            ) : (
                <RedirectLogin dontHavePermisioms={!havePermissions} />
            )}
        </Container>
    );
}

关键修改说明 #

• 移除async组件定义，改用useEffect执行异步逻辑，符合React组件规范
• 用useState管理havePermissions和isLoading状态：状态变更会自动触发组件重渲染，更新UI
• 统一用async/await处理异步请求，代码更简洁易读
• 添加try/catch捕获请求异常，避免前端崩溃
• 新增加载状态，避免校验过程中UI闪烁，提升用户体验
• 简化权限判断逻辑，去掉冗余的dontHavePermisioms状态，直接用!havePermissions替代

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