如何通过useParams的ID从Firestore获取单文档（TypeScript问题）

架构老林

2026-7-25

修复useParams获取ID导致Firestore文档引用的TypeScript错误

问题背景

我开发了一款查看体操运动员列表的Web应用，点击运动员名称后通过useParams钩子跳转到该运动员的专属页面。尝试用页面ID从Firestore获取对应文档时，出现TypeScript错误；但硬编码文档ID时代码可正常运行。

错误原因

useParams返回的路由参数默认可能为undefined（TypeScript会识别这种潜在的空值情况），而Firestore的doc()函数要求文档ID参数必须是非空字符串，两者类型不匹配导致报错。

修复方案

方案1：明确参数类型+空值检查

先给useParams指定类型，确保id被识别为字符串类型，再提前检查id是否存在，避免传入undefined：

export const GymnastPage = () => {
  // 定义路由参数类型，声明id为字符串
  const { id } = useParams<{ id: string }>();

  // 若id不存在，直接返回提示或跳转
  if (!id) {
    return <div>无效的运动员ID</div>;
  }

  const docRef = doc(db, "GymnastsByCoach", user.uid, "Gymnasts", id);
  
  onSnapshot(docRef, (doc) => {
    console.log(doc.data(), doc.id);
  });
  
  return <div>运动员详情页面</div>;
};

方案2：使用非空断言（谨慎使用）

如果你能确保路由中一定存在id参数，可使用非空断言!强制告诉TypeScriptid不为undefined，但这种方式跳过了类型检查，仅在路由逻辑绝对可靠时使用：

export const GymnastPage = () => {
  const { id } = useParams<{ id: string }>();
  
  // 非空断言，确保id不为undefined
  const docRef = doc(db, "GymnastsByCoach", user.uid, "Gymnasts", id!);
  
  onSnapshot(docRef, (doc) => {
    console.log(doc.data(), doc.id);
  });
  
  return <div>运动员详情页面</div>;
};