如何通过useParams()获取两个参数？解决teamName获取报错问题

问题场景 #

路由配置如下：

<Route path="/:URL_name/equipos/:teamName" element={<TeamInfoPage />} />

通过<Link>跳转时传递参数：

<Link
  to={`/${tournament.URL_name}/equipos/${team.name}`}
  className="teamCard"
>
  <div className="teamName">{text}</div>
</Link>

在TeamInfoPage组件中能正常获取URL_name并找到对应赛事，但获取teamName时出现错误：

Cannot read properties of undefined (reading 'name')

错误原因 #

1. 数据结构匹配错误：球队信息并非直接存放在tournaments_data数组的元素中，而是每个赛事对象的teamStats数组内。当前代码试图从tournaments_data中直接查找teamName属性，而赛事对象根本没有该字段，导致team变量为undefined。
2. 缺乏空值校验：直接访问tournament.name和team.name，如果赛事或球队未找到，会触发类似的属性读取错误。

修复方案 #

修改TeamInfoPage组件，先找到对应赛事，再从该赛事的teamStats数组中匹配球队，同时增加空值判断：

import React from "react";
import { useParams } from "react-router-dom";

// Data
import { tournaments_data } from "../__FakeDatabase/Tournaments_data";

function TeamInfoPage() {
  const { URL_name, teamName } = useParams();
  // 先找到对应的赛事
  const tournament = tournaments_data.find((p) => p.URL_name === URL_name);
  // 从赛事的teamStats中找对应球队
  const team = tournament?.teamStats?.find((t) => t.name === teamName);

  return (
    <div className="teamInfoPage">
      <h1>Team Info</h1>
      {/* 空值判断，避免报错 */}
      {tournament?.name || "未找到赛事"}
      <br />
      {team?.name || "未找到球队"}
    </div>
  );
}

export default TeamInfoPage;

关键说明 #

• 使用可选链操作符?.，确保在tournament或teamStats不存在时不会抛出错误。
• 球队的匹配条件是name === teamName，和跳转时传递的team.name保持一致。
• 添加默认文本（如"未找到赛事/球队"）提升用户体验，避免页面空白。

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