React Router useParams返回string|undefined致属性读取报错问题

报错来自两个没处理到位的点：

• 类型不匹配导致查询失效：useParams() 返回的所有路由参数固定是string | undefined类型，如果你CoursesList.json里存的课程id是数字类型，用===做严格相等判断时，数字类型的id和字符串类型的路由参数永远无法相等，Array.find()匹配不到对应课程就会返回undefined。
• 边界场景漏判：你后续代码虽然判断了itemId是否存在，但没覆盖「路由参数存在、但找不到对应课程」的场景，之前直接读取thisCourse.title时，就会触发「读取undefined属性」的类型错误。

1. 统一比较时的变量类型：匹配前把路由参数转成和JSON内id一致的类型，比如JSON里id是数字的话，就转成数字再做比对：

const { itemId } = useParams();
// 若JSON内id为字符串类型，去掉Number()转换直接比对即可
const thisCourse = itemId
  ? coursesList.find((item) => item.id === Number(itemId))
  : null;

2. 补全边界判断：所有读取thisCourse属性的位置，都加可选链操作符或者兜底逻辑，不要直接访问属性，避免匹配失败时触发报错。你现在标题部分的判断逻辑是可用的，后续其他字段读取也要遵循这个规则，比如：

{/* 错误：直接访问属性，thisCourse为undefined时直接报错 */}
<p>{thisCourse.text}</p>

{/* 正确：加可选链+兜底值，匹配失败时展示默认内容 */}
<p>{thisCourse?.text || "暂无课程介绍"}</p>

3. （可选优化）如果用户手动输入了不存在的课程id，可以直接做重定向，不用展示残缺的错误页面：

import { Navigate } from "react-router-dom";

const SingleCourse = () => {
  const { itemId } = useParams();
  const thisCourse = itemId
    ? coursesList.find((item) => item.id === Number(itemId))
    : null;

  // 参数存在但匹配不到课程，直接跳404或者课程列表页
  if (itemId && !thisCourse) {
    return <Navigate to="/courses" replace />
  }

  // 其余原有组件逻辑...
}

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