React Router路由匹配Lodash find报错：Cannot read property 'description' of undefined

你遇到的问题核心很明确：当导航到/products/124时，Lodash的find函数没找到匹配的产品数据，返回了undefined，之后你尝试访问它的description属性就触发了TypeError。下面我帮你拆解常见原因和对应的解决办法：

1. 最常见的坑：URL参数与数据ID类型不匹配 #

React Router的URL参数默认都是字符串类型，但你的本地数据里的id大概率是数字类型（比如124而不是"124"）。直接用严格相等(===)匹配的话，find会完全找不到对应项，自然返回undefined。

修复代码示例： #

import React, { Component } from 'react';
import find from 'lodash/find';
import { Link } from 'react-router-dom';
import './EachProject.css';
import PRODUCTS from './path-to-your-products-data'; // 确认数据文件路径正确

class EachProject extends Component {
  render() {
    // 把字符串类型的URL参数转换成数字，和数据ID类型对齐
    const productId = parseInt(this.props.match.params.id, 10);
    // 用转换后的ID匹配数据
    const product = find(PRODUCTS, item => item.id === productId);

    // 先判断产品是否存在，再渲染内容（兜底很重要！）
    if (!product) {
      return <div>抱歉，该产品不存在</div>;
    }

    return (
      <div className="each-project">
        <h1>{product.name}</h1>
        <p>{product.description}</p>
        <Link to="/products">返回产品列表</Link>
      </div>
    );
  }
}

export default EachProject;

2. 数据导入或加载时机问题 #

• 先检查PRODUCTS的导入路径是否正确，确保数据文件确实导出了包含id和description字段的数组；
• 如果你的数据是异步加载的（比如从API获取），组件首次渲染时PRODUCTS可能还是空数组，find自然返回undefined。这种情况要加加载状态判断：

class EachProject extends Component {
  state = {
    products: [],
    isLoading: true
  };

  componentDidMount() {
    // 模拟异步获取数据的场景
    fetch('/your-api/products')
      .then(res => res.json())
      .then(data => {
        this.setState({ products: data, isLoading: false });
      });
  }

  render() {
    if (this.state.isLoading) {
      return <div>加载中...</div>;
    }

    const productId = parseInt(this.props.match.params.id, 10);
    const product = find(this.state.products, item => item.id === productId);

    if (!product) {
      return <div>抱歉，该产品不存在</div>;
    }

    return (
      // 渲染产品内容
    );
  }
}

3. Lodash find的使用语法错误 #

确认你正确传递了find的参数：第一个参数是要搜索的数组，第二个是匹配条件函数。如果不小心把匹配条件写成了赋值语句（比如item.id = productId），或者条件逻辑写错，也会导致找不到数据。

关键兜底习惯 #

不管什么原因，在访问product.description这类属性之前，一定要先判断product是否存在——这是防御性编程的基本操作，能帮你避免绝大多数这类undefined报错。

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