Next.js 14 TS类型不匹配错误：数组无法赋值给对象类型

问题核心 #

你将数组类型的customImage直接赋值给了要求单个SelectedCustomImageType对象的selectedCustomImage字段，类型系统因此抛出不兼容错误。

修复方案 #

根据你的业务需求选择以下任意一种方案：

方案1：取数组中的单个元素赋值（适用于需要默认选中第一个自定义图的场景）

直接从customImage数组中提取第一个元素，匹配selectedCustomImage要求的单个对象类型：

// 初始化cartProduct示例
const cartProduct = {
  // 其他字段...
  selectedCustomImage: customImage[0], // 取数组第一个元素，符合SelectedCustomImageType类型
};

方案2：处理空数组边界情况（防止数组为空导致的undefined）

如果customImage可能为空数组，添加兜底默认值避免报错：

const cartProduct = {
  // 其他字段...
  selectedCustomImage: customImage[0] || { status: false, image: null, price: 0 },
};

方案3：修改类型定义适配数组（如果业务需要存储多个自定义图）

如果cartProduct的selectedCustomImage原本就应该存储数组，修改其类型定义为数组类型：

// 调整CartProduct的类型定义
type CartProductType = {
  // 其他字段...
  selectedCustomImage: SelectedCustomImageType[]; // 改为数组类型
};

// 此时直接赋值customImage即可
const cartProduct: CartProductType = {
  // 其他字段...
  selectedCustomImage: customImage,
};

类型定义参考 #

确保SelectedCustomImageType的定义与数据结构匹配：

type SelectedCustomImageType = {
  status: boolean;
  image: null | string; // 根据实际业务调整image的类型，比如File | null
  price: number;
};

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