React父组件向子组件传Context对象，子组件为何接收undefined？

API 探路者

2026-7-27

React Context传递对象子组件获取undefined的解决方案

问题根源

父组件中MenuContext是命名导出（export const MenuContext），但子组件错误使用了默认导入（import MenuContext from "./Home.js"）。此时子组件拿到的MenuContext实际是父组件的默认导出（即Home组件），而非你创建的Context对象，因此useContext(MenuContext)返回undefined。

修复步骤

1. 修正子组件的Context导入方式

将子组件的导入语句改为命名导入：

// LandingPage.js
// 替换原导入语句
import { MenuContext } from "./Home.js"

2. 可选：给Context设置默认值（增强健壮性）

创建Context时传入默认值，避免组件未被Provider包裹时出现意外报错：

// Home.js
export const MenuContext = createContext({})

3. 可选：添加可选链操作符防止报错

在访问对象属性时使用?.，即使中间属性不存在也不会抛出错误：

<Button onClick={bigObject?.p0?.someProperty}>
  Click me!
</Button>

修复后的完整子组件代码

import React, { useContext} from "react";
import Button from "react-bootstrap/Button";

// 正确导入命名导出的Context
import { MenuContext } from "./Home.js"

export default function LandingPage({ isThisPageActive }) {
  const bigObject = useContext(MenuContext);

  let renderThis = null;
  if (isThisPageActive) {
    renderThis = (
      <Button onClick={bigObject?.p0?.someProperty}>
        Click me!
      </Button>
    );
  }

  return (
    <div>
      {renderThis}
    </div>
  );
}