使用PropTypes类型检查时报错：id为undefined，但实际可正常获取

这个问题其实是个常见的误解——你虽然能从props.match.params里拿到正确的id，但prop-types验证的是组件直接接收的顶层props，而不是嵌套在match里的值。你的组件代码里，NewChannel的顶层props里并没有id这个属性，所以prop-types会判定它是undefined，进而抛出警告。

下面给你两种可行的解决方式：

方式一：修改Prop-Types验证嵌套的match对象 #

既然你是从match.params里获取id，那可以直接验证match的结构，而不是单独验证顶层的id：

import PropTypes from 'prop-types';

const NewChannel = props => {
  const { id } = props.match.params;
  // ...组件逻辑
};

NewChannel.propTypes = {
  match: PropTypes.shape({
    params: PropTypes.shape({
      id: PropTypes.string.isRequired
    }).isRequired
  }).isRequired
};

export default React.memo(NewChannel);

这样prop-types就会正确检查match.params.id的存在性和类型，不会再抛出错误。

方式二：将id作为独立props传递给组件 #

如果你更希望保持propTypes里对id的直接验证，可以在路由配置时，把id从match.params中提取出来，作为独立props传给NewChannel：

// 路由配置示例（假设用React Router）
<Route 
  path="/your-path/:id" 
  render={(routerProps) => (
    <NewChannel 
      id={routerProps.match.params.id} 
      {...routerProps} // 保留其他路由相关props
    />
  )} 
/>

这样NewChannel的顶层props里就会有id属性，你的原propTypes配置就能正常工作，同时也不会丢失match、location等路由对象。

补充一句：你用console.log能拿到id是因为你访问的是props.match.params.id，但prop-types检查的是props.id——这两个是完全不同的属性，所以才会出现“能拿到值但报错”的矛盾情况。

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