React+TypeScript开发SWAPI应用时请求传参异常：发送[object Object]

核心问题分析 #

你遇到的问题根源有两个：

• 组件接收参数方式错误：CharacterDetails组件直接声明接收id参数，但react-router-dom v6+中，路由参数需通过useParams钩子获取，并非直接作为组件props传入。
• 点击事件获取ID存在风险：event.target可能指向TableCell内部的文本节点，而非你设置id属性的TableCell元素，导致拿到错误值。

步骤1：修正CharacterDetails组件的参数获取逻辑 #

react-router-dom v6+不再将路由参数直接作为props传递，需用useParams钩子提取:id参数：

import { useParams } from 'react-router-dom';

const CharacterDetails = (): JSX.Element => {
  // 匹配路由配置中的:id参数，指定类型确保类型安全
  const { id } = useParams<{ id: string }>();
  // 初始值设为null更合理，单个人物对象不是数组类型
  const [character, setCharacter] = useState<any | null>(null);

  const handleCharacterRequest = async (characterId: string) => {
    try {
      // 若API要求数字ID，需转换类型
      const results = await getCharacter(Number(characterId));
      setCharacter(results);
    } catch (err) {
      console.error(err);
    }
  };

  useEffect(() => {
    // 先判断id存在再发起请求，避免无效调用
    if (id) {
      handleCharacterRequest(id);
    }
  }, [id]) // 添加id为依赖项，路由参数变化时自动重新请求

  // ... 组件其他渲染逻辑
}

步骤2：修复点击事件的ID获取逻辑 #

event.target可能指向TableCell内部的文本节点，改用event.currentTarget确保获取绑定事件的元素：

const clickHandler = (event: MouseEvent<HTMLElement>) => {
  // currentTarget始终指向绑定事件的TableCell元素
  const { id } = event.currentTarget as HTMLElement;
  navigate(`/character/${id}`);
};

或者更简洁的方式，直接传递character.id，避免依赖DOM属性：

<TableCell onClick={() => navigate(`/character/${character.id}`)}>
Id: {character.id}
</TableCell>

步骤3：确认路由配置正确性 #

你的路由配置本身没问题，但需确保CharacterDetails组件是通过路由渲染，而非手动调用（手动调用不会注入路由参数）：

<Route path='/character/:id' element={<CharacterDetails />}/>

额外优化建议 #

• 不要使用any类型，为character定义接口提升TypeScript类型检查能力：

  interface Character {
    id: number;
    name: string;
    // 补充SWAPI人物的其他属性...
  }
  const [character, setCharacter] = useState<Character | null>(null);
  

• 初始状态用null替代数组，避免后续渲染时出现类型不匹配问题。

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