Hilla(Vaadin)网格展示分类报错：Type 'Promise<void>'缺失属性

核心问题分析 #

• 你遇到的Type 'Promise<void>' is missing the following properties from type错误，本质是把异步方法返回的Promise对象直接赋值给了Grid需要的数组数据源，Vaadin Grid无法识别Promise类型的数据。
• 后续出现的“AllItem is not iterate”和Promise结果undefined，是因为没有正确等待异步请求完成就尝试使用返回值。

具体修复步骤 #

1. 修正存储类的异步加载逻辑 #

修改CategoryListRegisterViewStore中的loadProductCategory方法，用await等待异步请求完成后，再把实际数据赋值给categoryList：

async loadProductCategory() {
  // 等待fetchProductCatgeory返回实际的分类数组，而非Promise
  this.categoryList = await this.productStore.fetchProductCatgeory();
}

2. 正确绑定Grid数据源 #

Grid的items属性要绑定到存储中的categoryList数组，而不是直接绑定loadProductCategory方法：

<vaadin-grid .items="${this.store.categoryList}">
  <!-- 你的列定义 -->
  <vaadin-grid-column path="categoryName" header="分类名称"></vaadin-grid-column>
</vaadin-grid>

3. 初始化时触发数据加载 #

在视图组件的connectedCallback中调用加载方法，确保组件挂载时自动拉取数据：

connectedCallback() {
  super.connectedCallback();
  // 触发异步加载
  this.store.loadProductCategory();
}

4. 校验后端与前端类型一致性 #

• 确认后端fetchAllProdCategory方法返回的是List<ProdCategory>（或对应实体类的列表），且已正确标注@Nonnull。
• 如果前端类型定义异常，执行mvn vaadin:generate-frontend重新生成客户端代码，确保前后端类型匹配。

额外优化：添加加载状态处理 #

可以在存储类中增加加载状态属性，提升用户体验：

// 存储类中新增状态属性
isLoading = false;

async loadProductCategory() {
  this.isLoading = true;
  try {
    this.categoryList = await this.productStore.fetchProductCatgeory();
  } finally {
    this.isLoading = false;
  }
}

在Grid中绑定加载状态：

<vaadin-grid .items="${this.store.categoryList}" ?loading="${this.store.isLoading}">
</vaadin-grid>

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