Next.js中如何在页面加载前等待React Context完成初始化

架构老林

2026-9-30

这个报错和你推测的加载速度无关，React 组件遵循从父到子的渲染顺序，全局包裹在 _app.js 中的 ItemContextProvider 一定会先于内部的页面/布局组件初始化，问题出在 Context 使用的两处疏漏：

创建 Context 时未设置默认值，当 useContext 执行时如果未匹配到上层 Provider，返回值就是 undefined，解构 items 自然会报错
你使用了 Next.js 的 getLayout 嵌套布局模式，大概率是 /browse 路径下的页面未正确配置 getLayout 属性，导致直接访问页面时布局逻辑异常

修复方案

1. 完善 Context 基础配置

修改 ItemContext.js 代码，添加默认值和调用校验：

import { createContext, useContext, useState } from 'react';

// 新增默认值，避免未匹配到Provider时返回undefined
const ItemContext = createContext({
  items: [],
  getSingleItem: () => null,
  addItem: () => {}
});

export function useItems() {
  const context = useContext(ItemContext);
  // 开发阶段快速定位Provider缺失问题
  if (!context) {
    throw new Error('useItems 必须在 ItemContextProvider 内部使用');
  }
  return context;
}

// 剩余的Provider、useItemContext逻辑保持原有代码即可

2. 调用处添加兜底逻辑

后续你要从数据库拉取商品数据，初始化阶段会存在空窗期，修改 NestedLayout 中的 Context 调用代码：

// 替换原有解构写法，加空值兜底
const itemContext = useItems();
const items = itemContext?.items || [];

3. 确认页面布局配置

检查 pages/browse/ 目录下的所有页面文件，确保都配置了嵌套布局，以 pages/browse/index.js 为例：

function BrowsePage() {
  // 页面原有逻辑
}

// 必须添加该配置，否则_app.js会使用默认布局，不会渲染NestedLayout
BrowsePage.getLayout = function getLayout(page) {
  return <NestedLayout>{page}</NestedLayout>;
};

export default BrowsePage;