Vue3 TypeScript中Object is possibly 'undefined'报错解决咨询

问题代码 #

export interface TenantDto {
  uuid: string;
  name: string;
}

export const useTenantStore = defineStore('tenant', {
  state: () => ({
    tenants: [],
  }),
  actions: {
    setMyTenants: (payload: TenantDto[]) => {
      this.tenants = payload;
    },
  }
);

报错信息 #

Object is possibly 'undefined'

原因分析 #

Pinia的action使用箭头函数时，箭头函数没有自身的this绑定，会继承外层作用域的this，而该场景下外层this为undefined，导致TypeScript检测到this可能未定义，触发报错。

解决方案 #

1. 将箭头函数替换为普通函数，让this自动绑定到Pinia store实例：

export const useTenantStore = defineStore('tenant', {
  state: () => ({
    tenants: [],
  }),
  actions: {
    setMyTenants(payload: TenantDto[]) {
      this.tenants = payload;
    },
  }
});

2. 给state添加明确的类型标注（可选，进一步提升类型安全性）：

export const useTenantStore = defineStore('tenant', {
  state: (): { tenants: TenantDto[] } => ({
    tenants: [],
  }),
  actions: {
    setMyTenants(payload: TenantDto[]) {
      this.tenants = payload;
    },
  }
});

说明 #

改用普通函数后，Pinia会自动将action的this绑定到当前store实例，此时this.tenants能被TypeScript正确识别为TenantDto[]类型，消除报错。添加state类型标注则能让TypeScript更清晰地推断state结构，避免潜在的类型问题。

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