Svelte（TypeScript环境）中出现‘object类型不存在对应属性’错误

1. 组件Props类型未正确定义 #

用TypeScript时，组件接收的props如果没声明包含title的类型，TS会报错“属性title不存在于该类型中”。比如组件里只写了空的Props接口：

// 错误写法
interface Props {}
function MyComponent(props: Props) {
  return <div>{props.title}</div>
}

解决：给Props接口添加title属性，或直接定义对应对象类型：

interface ItemProps {
  title: string;
  // 按需添加其他属性，比如id、content等
}
function MyComponent(props: ItemProps) {
  return <div>{props.title}</div>
}

2. 数据源数组类型未声明 #

如果数组没有显式声明类型，TS可能推断出不包含title的类型（比如接口请求返回的数据默认推断为unknown[]），传递给组件时触发报错。
解决：显式声明数组的元素类型：

interface Item {
  title: string;
  id: number;
}
const items: Item[] = [
  { title: "标题1", id: 1 },
  { title: "标题2", id: 2 }
];

3. 组件传参方式错误 #

循环数组时，可能未正确传递title属性，比如把整个对象传给组件，但组件直接取props.title而非props.item.title：

// 错误写法
{items.map(item => <MyComponent item={item} />)}

解决：二选一：

• 解构传递单个属性：

{items.map(item => <MyComponent title={item.title} key={item.id} />)}

• 组件接收整个对象：

interface ItemProps {
  item: { title: string; id: number };
}
function MyComponent(props: ItemProps) {
  return <div>{props.item.title}</div>
}
// 调用时：
{items.map(item => <MyComponent item={item} key={item.id} />)}

4. 数组元素不符合预期 #

如果数组里存在缺少title的对象，或元素为undefined，TS同样会报错。比如：

const items = [
  { title: "标题1", id: 1 },
  { id: 2 } // 缺失title属性
];

解决：检查数组所有元素，确保都包含title；若允许title缺失，可设为可选属性：

interface Item {
  title?: string;
  id: number;
}

控制台日志异常排查 #

类型问题解决后若日志仍异常，大概率是数组/对象实际值和预期不符，比如请求返回空数组、title为null/undefined，或属性名拼写错误（如tilte）。可在循环前打印日志确认：

console.log('当前数组数据:', items);

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