TypeScript React+Ionic项目转换遇两类类型错误求助

错误1：EffectCallback类型不匹配 #

问题根源：useEffect的回调函数返回值只能是void，或者一个返回void的清理函数。你的代码里，前面的return setSearchResults([])返回void，但后面的清理函数() => (cancel = true)返回的是boolean（赋值表达式的结果是true），导致TypeScript推断返回类型为void | (() => boolean)，不符合EffectCallback的类型要求。

修复方式：把清理函数改成明确返回void的形式，用大括号包裹赋值语句，不返回任何值：

return () => { cancel = true; }

错误2：SetStateAction<never[]>类型不匹配 #

问题根源：你没有给searchResults状态指定类型，TypeScript根据空数组初始值推断其类型为never[]（表示永远不会有元素的数组），但你传入的是包含特定属性的对象数组，类型完全不兼容。

修复方式：

1. 先定义一个接口描述搜索结果的结构：

interface Track {
  artist: string;
  title: string;
  uri: string;
  albumUrl: string;
}

2. 初始化状态时明确指定类型：

const [searchResults, setSearchResults] = useState<Track[]>([]);

修改后的完整代码 #

import { useState, useEffect } from 'react';

interface Track {
  artist: string;
  title: string;
  uri: string;
  albumUrl: string;
}

// 组件内状态定义
const [searchResults, setSearchResults] = useState<Track[]>([]);

useEffect(() => {
  if (!search) {
    setSearchResults([]);
    return;
  }
  if (!accessToken) return;

  let cancel = false;
  spotifyApi.searchTracks(search).then(res => {
    if (cancel) return;
    setSearchResults(
      res.body.tracks.items.map(track => {
        const smallestAlbumImage = track.album.images.reduce(
          (smallest, image) => {
            if (image.height < smallest.height) return image;
            return smallest;
          },
          track.album.images[0]
        );

        return {
          artist: track.artists[0].name,
          title: track.name,
          uri: track.uri,
          albumUrl: smallestAlbumImage.url,
        };
      })
    );
  });

  return () => { cancel = true; };
}, [search, accessToken]);

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