Next.js中notFound结合Context与Suspense触发Hook渲染错误排查

问题场景 #

通过两个Server Action加载数据：

• 成功的Server Action结果由React Context提供
• 失败的Server Action调用notFound()触发404页面
• 点击404页面返回首页的按钮后，触发Rendered more hooks than during the previous render错误，同时伴随Cannot update a component while rendering a different component警告

错误原因 #

1. 客户端组件钩子违规使用：DataProvider（客户端组件）的useEffect回调直接使用了await，但React规定useEffect的回调函数不能是异步函数，这会导致钩子执行逻辑异常，在页面导航（从404返回首页）时触发钩子数量不匹配的错误。
2. 导航后组件渲染状态混乱：当FailData组件调用的willFail触发notFound()后，客户端组件的渲染上下文进入异常状态，返回首页时，钩子执行顺序与初始渲染不一致，进而引发错误。

修复方案 #

1. 修正useEffect的异步调用方式 #

将useEffect中的异步逻辑包裹在内部async函数中，避免直接将useEffect回调设为异步：

2. 确保组件渲染状态一致性 #

通过规范钩子使用，避免导航后组件渲染上下文异常，修正后的代码如下：

修正后的 provider.tsx

"use client";

import React from "react";
import { willSucceed } from "./actions";

export const dataContext = React.createContext(null);

export function DataProvider({ children }: { children: React.ReactNode }) {
  const [data, setData] = React.useState(null);
  React.useEffect(() => {
    // 用内部异步函数处理Server Action调用
    const fetchData = async () => {
      const result = await willSucceed();
      setData(result);
    };
    fetchData();
  }, []);
  return <dataContext.Provider value={data}>{children}</dataContext.Provider>;
}

优化后的 page.tsx（可选，增强错误处理）

import React from "react";
import { willFail } from "./actions";
import { DataProvider } from "./provider";

export default async function Page() {
  return (
    <DataProvider>
      <React.Suspense fallback={<div>加载中...</div>}>
        <FailData />
      </React.Suspense>
    </DataProvider>
  );
}

async function FailData() {
  try {
    return <div>{await willFail()}</div>;
  } catch (e) {
    throw e; // 保留notFound()的原生行为
  }
}

actions.ts与not-found.tsx无需修改，保持原逻辑即可。

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