React组件传递personId时传入对象而非数字类型的问题排查

使用The Movie DB API开发影视类应用时，封装了Actor演员卡片组件，需要向组件传递演员ID，通过react-router-dom的Link组件跳转至人物详情页时，发现实际传入的是对象类型，而非预期的数字类型personId，点击卡片跳转时触发类型报错。

import React from 'react';
// Styles
import { Wrapper, Image } from './Actor.style'

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

const Actor = ({name, character, imageUrl, personId}) => {
    console.log(personId);
    return(
        <Wrapper>
            <Link to={`/person/${personId}`}>
                <Image src={imageUrl} alt='actor-thumb' />
            </Link>

            <h3>{name}</h3>
            <p>{character}</p>
        </Wrapper>
    )
}

export default Actor;

• 组件可正常在页面渲染，演员头像、名称、参演角色信息均展示正常
• 点击任意演员卡片触发路由跳转时抛出类型错误

1. 首先排查父组件传参错误
   绝大多数同类问题都是遍历演员列表渲染Actor组件时，误将整个演员对象作为personId属性传入，正确传值需要取演员对象的id字段，示例写法：

   // 错误写法：传入整个对象
   // {actorList.map(actor => <Actor personId={actor} ...其他属性 />)}
   
   // 正确写法：传入对象内的id数值
   {actorList.map(actor => <Actor personId={actor.id} name={actor.name} ...其他属性 />)}
   

2. 组件内增加类型兜底逻辑
   即使父组件传参出现异常，也可以在Actor组件内部对personId做类型校验，避免拼接出非法路由路径，同时增加ID存在性判断，无效ID时不渲染跳转链接。修正后的组件代码如下：

   import React from 'react';
   // Styles
   import { Wrapper, Image } from './Actor.style'
   import { Link } from 'react-router-dom';
   
   const Actor = ({name, character, imageUrl, personId}) => {
       // 兼容异常传值：如果传入的是对象，自动取对象的id字段作为合法ID
       const validId = typeof personId === 'object' && personId !== null ? personId.id : personId;
       
       return(
           <Wrapper>
               {
                   validId ? (
                       <Link to={`/person/${validId}`}>
                           <Image src={imageUrl} alt='actor-thumb' />
                       </Link>
                   ) : (
                       <Image src={imageUrl} alt='actor-thumb' />
                   )
               }
               <h3>{name}</h3>
               <p>{character}</p>
           </Wrapper>
       )
   }
   
   export default Actor;
   

3. 详情页参数类型转换
   react-router-dom的路由参数默认解析为字符串类型，在人物详情页通过useParams()取到参数后，如果需要传给TMDB API做请求参数，手动转为数字类型即可：

   import { useParams } from 'react-router-dom';
   
   const PersonDetail = () => {
       const { personId } = useParams();
       // 转为数字类型再用于接口请求
       const fetchPersonId = Number(personId);
       // 后续接口请求逻辑...
   }
   

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