型 'string[]' の引数を型 'SetStateAction' のパラメーターに割り当てることはできません。の解決方法について

はじめに

検索機能を実装していて下記のようなエラーが表示されました。
こちらの解決方法について共有させていただきます。

型 'string[]' の引数を型 'SetStateAction' のパラメーターに割り当てることはできません。ts(2345)
const matchedSkills: string[]

下記のように記述していました。

.tsx

function App() {
  const [users, setUsers] = useState<Users[]>([]);
  const [userSkill, setUserSkill] = useState<UserSkill[]>([]);
  const [skills, setSkills] = useState<Skills[]>([]);
  const [searchUserId, setSearchUserId] = useState<Users["user_id"]>("");
  const [resultSkills, setResultSkills] = useState<Skills["name"]>("");


// 検索機能
const handleSearch = () => {
  if (!searchUserId) {
    console.warn('検索するuser_idを入力してください');
    return;
  }

  // ユーザーが持つスキルのIDを取得
  const matchedSkillId = userSkill.filter((us) =>  us.user_id === searchUserId).map((ui) => ui.skill_id);
  
  // スキルIDに該当するスキル名を取得
  const matchedSkills = skills.filter((skill) => matchedSkillId.includes(skill.id)).map((sk) => sk.name);

  setResultSkills(matchedSkills); // ← エラーが出ている箇所
  console.log(matchedSkills);
}

それぞれの型は下記のように記述しています。

.types.ts

export interface Users {
  user_id: string;
  name: string;
  description: string;
  github_id?: string;
  qiita_id?: string;
  x_id?: string;
}

export interface UserSkill {
  id: number;
  user_id: string;
  skill_id: number;
}

export interface Skills {
  id: number;
  name: string;
}

解決方法

型指定の記述をstringで配列にする

const [resultSkills, setResultSkills] = useState<Skills["name"]>("");

下記のように修正

const [resultSkills, setResultSkills] = useState<string[]>([]);

終わりに

データ取得が１つだけだという先入観でnameを指定していました。
２つのデータを取得する場合もあり、配列にする必要がありました。