TypeScript类型赋值报错：'string[]'无法赋值给'TagProps[]'，求排查

报错的核心原因是：你声明tags为TagProps[]类型，但data.properties.tag.multi_select的实际类型是string[]，字符串数组无法直接赋值给对象数组类型，导致类型不兼容。

可能的出错点 #

• 你预期data.properties.tag.multi_select返回的是包含id、name、color的对象数组（和你定义的TagProps匹配），但实际它返回的是选中标签的名称字符串数组。
• 或者你使用的数据源（比如Notion API）中，该字段的结构和你的预期不符，某些场景下它会返回字符串数组而非对象数组。

解决方案 #

方案1：调整类型以匹配实际数据 #

如果multi_select确实是字符串数组，直接修改变量类型：

// 直接用字符串数组类型
const tags: string[] = data.properties.tag.multi_select;

// 渲染时直接使用字符串
<section className="mt-2 flex items-start space-x-2">
  {tags.map((name, index) => (
    <h1 className="w-30 rounded-md bg-sky-200 px-2 py-1 dark:bg-sky-700" key={index}>
      {name}
    </h1>
  ))}
</section>

方案2：将字符串数组转换为TagProps数组 #

如果必须使用TagProps类型，把字符串转成符合要求的对象：

type TagProps = {
  id: string;
  name: string;
  color: string;
};

// 将字符串数组转换为TagProps数组，生成唯一id和默认颜色
const tags: TagProps[] = data.properties.tag.multi_select.map(name => ({
  id: crypto.randomUUID(), // 生成唯一id，或者用name作为id（如果name唯一）
  name,
  color: 'sky-200' // 可根据需要设置默认颜色，或按name映射不同颜色
}));

// 渲染代码保持不变
<section className="mt-2 flex items-start space-x-2">
  {tags.map(({ id, name }) => (
    <h1 className="w-30 rounded-md bg-sky-200 px-2 py-1 dark:bg-sky-700" key={id}>
      {name}
    </h1>
  ))}
</section>

方案3：检查数据源结构 #

如果你的预期是multi_select返回对象数组，那需要确认数据源的实际结构：

• 打印console.log(data.properties.tag.multi_select)查看真实数据格式。
• 确认是否访问路径错误（比如是否应该是data.properties.tag.multi_select.items之类的嵌套结构）。

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