React JS向子组件传递Props异常：部分用户接收参数为undefined

Hey there! Let's start with the core question: your prop-passing syntax itself is technically correct. Using the spread operator ({...this.props}) to pass all parent props to the child, then explicitly adding additional_prop={this.props.match.params.id} is a valid pattern—this will pass every prop from MainComponent to SubComponent, plus the extra additional_prop (and if there was a duplicate prop name, the explicit one would override the spread, which isn't an issue here).

That said, the undefined issue some users are seeing points to problems with where this.props.match.params.id is coming from, not the prop-passing logic itself. Here are the most likely culprits and fixes:

1. The Route Isn't Configured with the :id Parameter #

First, double-check your route setup. If MainComponent is rendered via a Route that doesn't define the :id parameter in its path, this.props.match.params.id will be undefined. For example:

// Wrong: No :id in the path
<Route path="/my-page" component={MainComponent} />

// Correct: Includes the :id parameter
<Route path="/my-page/:id" component={MainComponent} />

2. MainComponent Isn't Receiving the match Prop #

The match object is automatically injected into components that are directly rendered by a Route component. If MainComponent is a child of another component (not directly rendered by Route), it won't get match in its props by default.

Fix this by wrapping MainComponent with the withRouter higher-order component:

import { withRouter } from 'react-router-dom';

class MainComponent extends Component {
  // ... your existing code
}

// Wrap the component to inject route props like match
export default withRouter(MainComponent);

3. Timing/Loading Issues #

If MainComponent renders before the route has fully resolved (e.g., early in the component lifecycle before the router finishes initializing), this.props.match might be undefined temporarily. Add a guard clause to handle this:

render() {
  // Check if match exists before accessing params
  if (!this.props.match) {
    return <div>Loading...</div>;
  }

  const additionalProp = this.props.match.params.id;
  return <SubComponent {...this.props} additional_prop={additionalProp} />;
}

4. Add Safe Null Checks #

Even if everything is configured correctly, it's good practice to add optional chaining and nullish coalescing to avoid unexpected undefined values:

// Safe access with optional chaining, plus a fallback value
const additionalProp = this.props.match?.params?.id ?? 'default-id';
const subComponent = <SubComponent {...this.props} additional_prop={additionalProp} />;

To recap: Your prop-passing method is correct. The undefined issue stems from problems with the route parameter or access to the match object. Work through the checks above, and you should resolve the problem for all users.

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