React警告：Container组件children属性无效，async组件问题求助

问题根源 #

你编写的LatestSites是一个异步函数组件，执行后返回的是Promise<JSX.Element>，而MUI的Container组件要求children必须是合法的ReactNode（如React元素、字符串、null等）。Promise不属于React可直接渲染的节点类型，因此触发了Invalid prop 'children'的警告。

解决方法 #

方案1：Next.js App Router 服务器组件场景（你的代码适配此场景）

如果项目基于Next.js App Router，默认页面组件是服务器组件，可直接引入异步组件。若页面组件（page.tsx）被标记为客户端组件（添加了'use client'），则需用Suspense包裹异步组件以提供加载状态：

// page.tsx
'use client'; // 若页面为客户端组件
import { Container } from '@mui/material';
import { Suspense } from 'react';
import LatestSites from './_components/LatestSites';

export default function Home() {
  return (
    <Container sx={{ pt: 2 }}>
      <Suspense fallback={<div>加载中...</div>}>
        <LatestSites />
      </Suspense>
    </Container>
  );
}

方案2：客户端组件异步请求处理

如果需要在客户端组件中完成数据获取，不要将组件定义为异步函数，改用useEffect + useState处理异步逻辑：

// LatestSites.tsx
import { useState, useEffect } from 'react';
import prisma from '@/prisma/client';

const LatestSites = () => {
  const [sites, setSites] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchSites = async () => {
      const siteData = await prisma.site.findMany({
        orderBy: { startDate: 'desc' },
        take: 5,
        include: { assignedToUser: true },
      });
      setSites(siteData);
      setLoading(false);
    };

    fetchSites();
  }, []);

  if (loading) return <div>加载中...</div>;

  return <div>test</div>;
};

export default LatestSites;

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