React向子组件传参后白屏：为何propTypes校验失败？

核心问题 #

你遇到的白屏和控制台错误，本质是组件props的传递与接收完全不匹配：

• 路由中给Support组件传递的是两个独立props：username和id，但组件代码里却试图通过this.props.person获取参数——person这个props根本没被传递，自然会触发"无法读取未定义属性"的错误，导致React渲染失败，出现白屏。
• 同时你定义了username和id的PropTypes，但组件实际没使用这两个props，反而访问未声明的person，PropTypes的校验逻辑也会抛出警告/错误，进一步加剧渲染问题。

解决方法 #

根据你的需求，有两种修正方向：

方向1：保持组件通过person接收参数 #

如果组件设计就是要通过person对象获取用户信息，需修改路由的传参方式，将参数打包成对象传入：

<Support person={{ username: "jim", id: "weenie" }} />

同时更新PropTypes，声明person为对象类型并指定内部属性：

import PropTypes from 'prop-types';

Support.propTypes = {
  person: PropTypes.shape({
    username: PropTypes.string.isRequired,
    id: PropTypes.string.isRequired
  }).isRequired
};

方向2：保持路由传独立props，修改组件接收逻辑 #

如果要继续使用独立的username和id传参，需调整组件内的参数获取方式，直接访问对应props：

// 组件内使用示例
render() {
  const { username, id } = this.props;
  return (
    <div>
      <p>用户名：{username}</p>
      <p>ID：{id}</p>
    </div>
  );
}

这种情况下你原本定义的PropTypes是正确的，无需修改：

Support.propTypes = {
  username: PropTypes.string.isRequired,
  id: PropTypes.string.isRequired
};

补充说明 #

白屏的直接原因是React遇到未捕获的错误（比如访问不存在的props属性），如果你的应用没有设置错误边界，会导致整个组件树渲染中断，最终显示空白页面，控制台通常会输出类似Cannot read properties of undefined (reading 'xxx')的错误信息。

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