React父组件传递对象prop给子组件收到undefined问题求助

架构老林

2026-10-5

示例代码

父组件

import TestPage from "pages/Test"; 

const text = {
  crono: "crono",
  watch: "clock",
  start: "start",
  stop: "stop",
  split: "split",
  pause: "pause",
  clear: "clear",
};

export default function Base() {
  return (
    <section className="main-container">
      <TestPage text={text} />
    </section>
  );
}

子组件

export default function Test({ text }) {
  console.log(text);
  return <h1>{text.split}</h1>;
}

可能的问题原因

导入路径错误：确认本地项目中TestPage的导入路径和别名配置是否正确，若路径不匹配，导入的默认值为空，解构text自然为undefined。注意你的子组件默认导出名称为Test，导入时命名为TestPage本身是合法的，重点排查路径是否和本地文件结构匹配，比如是否配置了pages路径别名指向src下的pages目录，没配置的话要改用相对路径导入。
大小写拼写错误：确认父组件传prop时的属性名、子组件解构时的属性名完全一致，比如如果写成Text={text}或者子组件解构{ Text }，大小写不匹配就会取不到值。
路由渲染逻辑问题：如果你的TestPage同时作为路由页面使用，确认你访问的是父组件Base对应的路由，而不是直接访问TestPage对应的路由，直接路由渲染TestPage的场景下没有父组件传prop，自然收到undefined。
本地开发缓存问题：重启本地开发服务，清理构建缓存（比如删除node_modules、.cache、dist等目录后重新安装依赖启动），排除缓存导致的旧代码运行问题。