Next.js中如何将异步页面组件作为子组件渲染？

为什么会报错？ #

把Home组件设为async后，它返回的是Promise<JSX.Element>，而React要求组件必须返回有效的JSX元素，直接渲染Promise就会抛出Objects are not valid as a React child错误，TypeScript也会提示返回类型不符合JSX组件要求。

解决方案 #

1. 用Next.js官方SSR数据获取方案（最推荐）

如果Home是页面组件，别把组件本身设为async，而是用Next.js专门的服务端数据获取方法：

• Pages Router（旧路由）：在Home页面文件里导出getServerSideProps函数做SSR数据请求，组件本身保持同步：

  // pages/index.tsx
  export default function Home({ serverData }) {
    return <div>服务端数据：{serverData.content}</div>
  }
  
  // 服务端执行，获取数据后传给组件props
  export async function getServerSideProps() {
    const res = await fetch('https://your-api.com/data')
    const serverData = await res.json()
    return { props: { serverData } }
  }
  

  这时在_app.tsx里直接渲染Next.js传递的Component即可，完全不用手动处理异步：

  // _app.tsx
  export default function MyApp({ Component, pageProps }) {
    // 在这里处理认证逻辑，比如判断用户是否登录
    if (需要跳转登录页的情况) {
      return <Redirect to="/login" />
    }
    // 正常渲染页面组件
    return <Component {...pageProps} />
  }
  

• App Router（新路由，Next.js 13+）：页面组件（page.tsx）本身可以是async的，但你不需要在layout里手动渲染它。直接在layout.tsx里处理认证逻辑，框架会自动处理异步页面的渲染：

  // app/layout.tsx
  export default function RootLayout({ children }) {
    // 处理认证逻辑
    if (未认证且需要跳转) {
      return <Redirect to="/auth/login" />
    }
    // children是框架处理好的异步页面结果，直接渲染
    return (
      <html>
        <body>{children}</body>
      </html>
    )
  }
  

2. 封装异步组件加载器（非页面组件场景）

如果是在自定义组件里需要渲染异步组件，自己封装一个加载器处理Promise的状态：

// components/AsyncLoader.tsx
'use client' // Next.js 13+需要加这个，因为用了useState/useEffect
import { useState, useEffect } from 'react'

export default function AsyncLoader({ loadComponent }) {
  const [Comp, setComp] = useState(null)
  const [error, setError] = useState(null)

  useEffect(() => {
    const load = async () => {
      try {
        // 加载异步组件
        const module = await loadComponent()
        setComp(module.default || module)
      } catch (err) {
        setError(err)
      }
    }
    load()
  }, [loadComponent])

  if (error) return <div>加载失败：{error.message}</div>
  if (!Comp) return <div>加载中...</div>
  return <Comp />
}

然后在_app.tsx里这么用：

// _app.tsx
import AsyncLoader from '../components/AsyncLoader'

export default function MyApp({ Component, pageProps }) {
  // 比如判断当前是首页，需要渲染异步的Home组件
  if (pageProps.route === '/') {
    return (
      <AsyncLoader 
        loadComponent={() => import('../pages/index')}
      />
    )
  }
  return <Component {...pageProps} />
}

总结 #

优先用Next.js官方提供的数据获取和页面渲染机制，不要自己把页面组件改成async后手动渲染；如果是自定义异步组件，用状态管理处理Promise的加载、成功、错误状态，再渲染真实组件。

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