React.js Context API：自定义Hook中useContext返回null问题排查

以下是针对你遇到的useSectionContext调用useContext返回null问题的排查方向：

1. 验证sectionContextValues的实际值 #

你的Provider中传递给value的sectionContextValues可能并未正确初始化。在SectionProvider组件内添加日志，确认该对象是否存在有效内容：

export const SectionProvider = ({ children }: { children: ReactNode }) => {
  // ... 原有状态和逻辑

  // 确认sectionContextValues的值
  console.log('sectionContextValues:', sectionContextValues);

  return (
    <SectionContext.Provider value={sectionContextValues}>
      {children}
    </SectionContext.Provider>
  );
};

如果输出为undefined或null，说明你没有正确创建这个包含状态和辅助函数的对象，需要检查sectionContextValues的定义代码。

2. 确认调用Hook的组件在Provider子树内 #

确保调用useSectionContext的组件（比如<Dogs />、<CreateDogForm />或<Section />本身）确实被SectionProvider包裹。需要注意两种特殊情况：

• 若组件通过ReactDOM.createPortal渲染到DOM的其他位置，portal内的组件不在Provider的子树中，会拿到Context的初始值null。
• 若组件使用React.lazy懒加载，确保懒加载的组件被包含在Provider范围内，而非在Provider外加载。

3. 排查是否存在多个Context实例 #

即使你排除了基础的导入导出问题，仍可能因路径错误或重复定义导致使用了不同的SectionContext实例。在自定义Hook和Provider中分别打印Context引用，确认是否为同一个：

// 在useSectionContext中
console.log('Hook Context:', SectionContext);
// 在SectionProvider中
console.log('Provider Context:', SectionContext);

如果两者引用不同，说明你导入的是两个不同的Context对象，需要统一导入路径，避免重复定义。

4. 检查Provider的渲染条件 #

确认SectionProvider在App.tsx中没有被条件渲染包裹（比如if判断、三元表达式），导致组件渲染时Provider尚未挂载。如果存在条件渲染，需确保调用Hook的组件仅在Provider挂载后才渲染。

5. 排查TypeScript类型隐性问题 #

虽然TypeScript类型不影响运行时，但如果TSectionContext的定义与sectionContextValues的实际类型不匹配，可能导致你误以为对象有效，但实际运行时为undefined。可以检查TSectionContext的定义，或者在Provider中打印typeof sectionContextValues确认类型。

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