Next.js构建预渲染错误#31求助（附TodoList代码及日志）

基于Next.js 13 Todo示例项目开发，执行next build构建生产环境时，/todolist页面触发预渲染错误，报错为Minified React error #31。

页面代码（todolist.js） #

import Todo from "./todo";

const getTodos = async () => {
  let todos = await fetch("/api/todo/list");
  return todos.json();
};

export default async function TodoList() {
  const { todos } = await getTodos();

  return (
    <div>
      <ul style={{ listStyleType: "none", padding: 0 }}>
        {todos.map((t) => {
          return (
            <li key={t.id} style={{ padding: "5px 0" }}>
              
            </li>
          );
        })}
      </ul>
    </div>
  );
}

完整错误日志 #

> my-next-app@0.1.0 build
> next build

info  - Linting and checking validity of types  
info  - Creating an optimized production build  
info  - Compiled successfully
info  - Collecting page data
[    ] info  - Generating static pages (0/7)
Error occurred prerendering page "/todolist". Read more: https://nextjs.org/docs/messages/prerender-error
Error: Minified React error #31; visit https://reactjs.org/docs/error-decoder.html?invariant=31&args[]=%5Bobject%20Promise%5D for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at Z (C:\Users\MazharKaunain\klll\my-next-app\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:76:490)    at Zc (C:\Users\MazharKaunain\klll\my-next-app\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:70:481)
    at Z (C:\Users\MazharKaunain\klll\my-next-app\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:76:89) 
    at Zc (C:\Users\MazharKaunain\klll\my-next-app\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:70:481)
    at Z (C:\Users\MazharKaunain\klll\my-next-app\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:76:89) 
    at Zc (C:\Users\MazharKaunain\klll\my-next-app\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:70:481)
    at Z (C:\Users\MazharKaunain\klll\my-next-app\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:76:89) 
    at $c (C:\Users\MazharKaunain\klll\my-next-app\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:78:98)    at bd (C:\Users\MazharKaunain\klll\my-next-app\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:77:404)
    at Z (C:\Users\MazharKaunain\klll\my-next-app\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:76:217)(node:10420) ExperimentalWarning: The Fetch API is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
undefined
info  - Generating static pages (7/7)

> Build error occurred
Error: Export encountered errors on following paths:
        /todolist
    at C:\Users\MazharKaunain\klll\my-next-app\node_modules\next\dist\export\index.js:415:19
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Span.traceAsyncFn (C:\Users\MazharKaunain\klll\my-next-app\node_modules\next\dist\trace\trace.js:79:20)
    at async C:\Users\MazharKaunain\klll\my-next-app\node_modules\next\dist\build\index.js:1400:21
    at async Span.traceAsyncFn (C:\Users\MazharKaunain\klll\my-next-app\node_modules\next\dist\trace\trace.js:79:20)
    at async C:\Users\MazharKaunain\klll\my-next-app\node_modules\next\dist\build\index.js:1259:17
    at async Span.traceAsyncFn (C:\Users\MazharKaunain\klll\my-next-app\node_modules\next\dist\trace\trace.js:79:20)
    at async Object.build [as default] (C:\Users\MazharKaunain\klll\my-next-app\node_modules\next\dist\build\index.js:66:29)   
PS C:\Users\MazharKaunain\klll\my-next-app>

问题根源 #

1. React错误#31本质是渲染了Promise对象：你把TodoList定义成了异步函数组件，在Next.js 13的Pages Router中，页面组件不能是异步函数——预渲染时React会尝试渲染这个组件返回的Promise，而非最终的JSX，直接触发该错误。
2. Pages Router数据获取方式错误：Pages Router中不能直接在组件内用async/await获取数据，必须使用官方指定的getStaticProps（静态生成）或getServerSideProps（服务端渲染）来预取数据。
3. Build阶段的fetch问题：即使组件可以异步，build时调用fetch("/api/todo/list")也会失败——此时API服务并未启动，无法完成网络请求，导致数据获取失败进而引发渲染问题。

修正方案 #

改用getStaticProps来获取数据，调整后的代码如下：

import Todo from "./todo";

// 用getStaticProps预取数据，build时执行
export async function getStaticProps() {
  // 注意：build时需要使用完整URL，或者直接调用API的核心逻辑（比如操作数据库）而非走fetch
  const res = await fetch("http://localhost:3000/api/todo/list");
  const data = await res.json();
  
  return {
    props: { todos: data.todos }, // 传递给页面组件的props
    revalidate: 60 // 可选，开启增量静态再生，60秒后重新生成页面
  };
}

// 页面组件改为普通函数，接收props中的todos
export default function TodoList({ todos }) {
  return (
    <div>
      <ul style={{ listStyleType: "none", padding: 0 }}>
        {todos.map((t) => {
          return (
            <li key={t.id} style={{ padding: "5px 0" }}>
              <Todo todo={t} /> {/* 记得渲染引入的Todo组件 */}
            </li>
          );
        })}
      </ul>
    </div>
  );
}

额外提醒：原代码中<li>标签是空的，没有渲染引入的Todo组件，这是功能缺失，也需要一并修正。

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