React父组件向子组件传props报undefined属性读取错误排查

报错本质是异步数据时序问题：你通过RETRIEVE_POST发起的axios请求是异步执行的，组件首次渲染时请求还未返回，此时data的初始值为undefined。你直接把未赋值的data传入子组件后，子组件第一行就执行const { user, content } = data，对undefined做解构会直接抛错，后续访问user.profileImageUrl时因为user根本不存在，就触发了cannot read properties of undefined的页面崩溃。
另外你代码里解析了URL参数postid但完全没使用，两个请求都硬编码传了id=4，useEffect依赖数组留空导致闭包拿到旧值，也是潜在bug。

从父组件加载态拦截、子组件兜底两层处理，彻底避免异步数据导致的渲染崩溃。

1. 父组件拦截未就绪状态，数据加载完成前不渲染子组件 #

你已经从请求Hook里拿到了loading、error状态，直接用这两个状态兜住加载、报错场景，不要把未就绪的空值传给子组件：

const Page: FC<PageProps> = () => {
  const dispatch = useAppDispatch();

  const querystring = window.location.search;
  const urlparameter = new URLSearchParams(querystring);
  const postid = Number(urlparameter.get("id"));

  // 去掉硬编码的4，使用实际解析出的帖子id
  const [COM] = GET_COMMENT(postid);
  const [data, loading, error] = RETRIEVE_POST("qna", postid);

  useEffect(() => {
    // 数据存在时再同步到全局store，避免传空值
    if (data) {
      dispatch(changeCurrentPage({ type: "/page/:uri", data: data }));
    }
    return () => {
      dispatch(changeCurrentPage({ type: "/", data: {} }));
    };
  // 补全依赖数组，避免闭包缓存旧值
  }, [data, dispatch]);

  // 加载中展示占位
  if (loading) return <div>帖子内容加载中...</div>;
  // 请求失败/数据为空展示错误提示
  if (error || !data) return <div>帖子加载失败，请刷新重试</div>;

  return (
    <>
      <div>
        <PostContent data={data} />
      </div>
    </>
  );
};

export default Page;

2. 子组件增加默认值和访问兜底，就算传值异常也不会崩溃 #

给props、解构的内部字段加默认值，访问深层属性时用可选链做保护，不要假设传入的数据一定完整：

// 明确类型定义，标记可选字段
interface ContentProps {
  data?: {
    user?: {
      profileImageUrl?: string;
      nickname?: string;
    };
    content?: string;
  }
}
const PostContent: FC<ContentProps> = ({ data = {} }) => {
  // 解构时给内部字段加空值兜底
  const { user = {}, content = "" } = data;
  return (
    <div>
      <div>
        {content}
      </div>   
      <div>
        {/* 用可选链判断属性存在再渲染，避免抛错 */}
        {user?.profileImageUrl ? (
          <Link to={user.profileImageUrl}>
            <Writer
              imgUrl={user.profileImageUrl}
              userName={user.nickname ?? "匿名用户"}
            />
          </Link>
        ) : (
          <div>作者信息暂不可用</div>
        )}
      </div>
    </div>
  );
};

• 所有异步获取的数据，永远不要假设首次渲染时已经拿到有效值，必须做存在性校验
• 自定义请求类Hook建议给返回的data设置明确初始值（比如null），不要默认返回undefined，从源头减少未定义值传递
• 不要随意留空useEffect的依赖数组，用到的外部变量都要加入依赖项，避免闭包导致的逻辑异常
• 访问对象深层嵌套属性时，优先用可选链?.配合空值合并??设置兜底内容，不要直接连续点属性访问

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