如何实现可嵌套的递归React Context？解决顶层报错问题

1. 修正Context默认值，消除控制台报错 #

问题根源是createContext未设置默认值，顶层组件调用useContext时会拿到undefined，进而触发报错。给Context设置合理默认值即可解决：

// 调整Context类型，存储路径数组而非拼接字符串
export interface PathContextValue {
  pathSegments: string[];
}
// 设置默认值为空数组，避免顶层无父上下文时的报错
export const PathContext = createContext<PathContextValue>({ pathSegments: [] });

2. 重构PathProvider逻辑，维护路径数组 #

原实现用字符串拼接，后续还要拆分才能得到数组，不如直接在Context中维护路径数组，嵌套时直接追加当前路径段：

export interface PathProviderProps extends React.PropsWithChildren {
  path: string;
}

export default function PathProvider({ path: currentSegment, children }: PathProviderProps) {
  const parentContext = useContext(PathContext);
  // 拼接父路径数组与当前路径段，生成新的路径数组
  const fullPathSegments = [...parentContext.pathSegments, currentSegment];

  return (
    <PathContext.Provider value={{ pathSegments: fullPathSegments }}>
      {children}
    </PathContext.Provider>
  );
}

3. 实现usePath自定义Hook #

封装Hook简化组件获取路径的逻辑：

export function usePath() {
  const { pathSegments } = useContext(PathContext);
  // 返回数组副本，避免外部修改Context内部值
  return [...pathSegments];
}

4. 使用示例 #

嵌套Provider后，组件中调用usePath()即可得到预期数组：

<PathProvider path="foo">
  <PathProvider path="bar">
    <PathProvider path="baz">
      <SomeComponent />
    </PathProvider>
  </PathProvider>
</PathProvider>

// SomeComponent内部
function SomeComponent() {
  const path = usePath();
  console.log(path); // 输出 ["foo", "bar", "baz"]
  return <div>{path.join('/')}</div>;
}

额外说明 #

• 如果需要保留字符串拼接格式（如"foo.bar.baz"），可在usePath中转换：return pathSegments.join('.')
• 给Context设置默认值是React官方推荐的避免无Provider报错的方案，比强制类型断言更安全

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