Next.js中直接在Image和Link标签属性内写入条件时出现TypeScript错误

看起来你已经定义好了电影卡片的类型，也搭好了组件的基础结构，但在Next.js的Image和Link标签里写条件逻辑时碰到TypeScript报错了对吧？先把你的代码梳理清楚：

首先是你的类型定义：

export interface ICardMovieTop {
    id: number
    poster: string
    backDrop: string
    title: string
    overview: string
    mediaType: string
    releaseDate: string
    rating: number
}

然后是CardMovieTop组件的基础结构：

const CardMovieTop = ({id, poster, backDrop, title, overview, mediaType, releaseDate, rating}: ICardMovieTop) => {
    return (
        <>
            {/* Poster on left side */}
            {/* 这里应该是你写Image和Link的地方，比如类似下面的代码会触发TS错误？ */}
            {/* <Link href={mediaType === 'movie' ? `/movies/${id}` : `/tv/${id}`}>...</Link> */}
            {/* <Image src={poster || backDrop} alt={title} /> */}
        </>
    )
}

常见的报错原因和解决方法我整理了几个：

• 1. Link的href路径类型不匹配
  如果你的mediaType是宽泛的字符串类型，TypeScript无法确定它只能是'movie'或'tv'这类固定值，就会认为href可能是不符合Next.js路由规则的字符串。解决方法是把ICardMovieTop里的mediaType改成联合类型：

  mediaType: 'movie' | 'tv'
  

  这样TypeScript就能确定href的路径是合法的，不会再报错。

• 2. Image的src属性存在空值风险
  虽然你的类型里poster和backDrop都是string，但如果后端返回空字符串（不是undefined），Next.js的Image组件会因为src为空报错。可以加个兜底判断，同时给TypeScript明确类型：

  <Image src={poster || backDrop || '/default-poster.png'} alt={title} />
  

  或者提前在组件开头处理空值：

  const validImageSrc = poster && poster !== '' ? poster : backDrop;
  // 然后在Image标签里使用validImageSrc
  

• 3. 条件判断里的类型窄化不充分
  如果你的条件逻辑比较复杂，TypeScript可能无法自动识别变量的类型，这时候可以用类型断言或者提前用变量把条件结果存起来：

  const linkHref = `/details/${mediaType}/${id}` as `/details/${'movie' | 'tv'}/${number}`;
  <Link href={linkHref}>...</Link>
  

你可以对照自己的代码看看是哪种情况，调整后应该就能解决TypeScript的错误啦！

备注：内容来源于stack exchange，提问作者Kevin Mahendra