React中useParams获取数据后解构报错：无法解构undefined的titulo属性

报错Cannot destructure property 'titulo' of 'actividad' as it is undefined说明actividad是undefined，也就是actividades.find(...)没有找到匹配的项。能渲染actId说明路由参数获取正常，问题出在匹配逻辑或数据校验上，以下是具体解决办法：

核心原因及修复 #

1. 类型不匹配（最常见） #

useParams()返回的所有参数都是字符串类型，但你的infoActividades.json里的id可能是数字类型。比如json里的id是1，而actId是"1"，用===全等比较会直接失败，导致find返回undefined。

修复方式：把actId转换为数字后再比较：

const actividad = actividades.find((actividad) => actividad.id === Number(actId));

如果json里的id本身是字符串，检查参数值和json里的id是否完全一致（注意大小写、空格等细节）。

2. 添加空值防护 #

即使匹配逻辑正确，也可能存在找不到对应数据的情况，必须先判断actividad是否存在再解构，避免报错：

// 方式1：提前判断并返回提示
if (!actividad) {
  return <div>该活动不存在</div>;
}
// 确认存在后再解构
const { titulo, descripcion, deadline, etiqueta} = actividad;

// 方式2：用默认值兜底
const { titulo, descripcion, deadline, etiqueta} = actividad || {};

3. 验证数据结构 #

检查infoActividades.json的结构是否正确，确保每个项都包含id、titulo等必填字段，示例结构：

[
  {
    "id": 1,
    "titulo": "示例活动",
    "descripcion": "活动描述",
    "deadline": "2021-10-10",
    "etiqueta": "学习"
  }
]

修改后的完整代码 #

import React from "react"; 
import { Link } from "react-router-dom";
import { useParams } from "react-router-dom";
import '../assets/css/Styles.css';
import '../assets/css/Colecciones.css';
import actividades from '../files/infoActividades.json';

function Acti() {
  const { actId } = useParams();
  // 转换类型并查找匹配项
  const actividad = actividades.find((actividad) => actividad.id === Number(actId));

  // 空值判断，避免解构报错
  if (!actividad) {
    return (
      <div className="header">
        <Link to=".." relative="path">
          <button className="btn-header">Regresar</button>
        </Link>      
        <h1 className="h1Contenido" style={{ fontFamily: 'HelveticaNeue' }}>活动不存在</h1>
      </div>
    );
  }

  const { titulo, descripcion, deadline, etiqueta} = actividad;

  return (
    <>
      <div>
        <div className="header">
          <Link to=".." relative="path">
            <button className="btn-header">
              Regresar
            </button>
          </Link>      
          <h1 className="h1Contenido" style={{ fontFamily: 'HelveticaNeue' }}>
            Desarrollo Web
          </h1>
        </div>
        <div className='main' style={{ display: 'flex' }}>
          <div className="actiCont">
            <div className="actiCont" style={{ backgroundColor: 'white' }}>
              <h1>{actId}</h1>
              <h2>{titulo}</h2>
              <p>{deadline}</p>
              <p>{descripcion}</p>
              <span>{etiqueta}</span>
            </div>
          </div>
          <div style={{ height: '300px' }}></div>
        </div>
      </div>
    </>
  )
}
export default Acti;

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