如何通过product_id获取WooCommerce评论？集成API遇未定义错误

WooCommerce REST API中，通过产品ID获取其下所有评论的正确端点是/wp-json/wc/v3/products/{product_id}/reviews，而非你当前使用的/products/reviews/{pid}（该端点用于通过评论ID获取单个评论）。

这个报错由三个核心问题导致，对应解决方案如下：

1. 修复API请求端点 #

修改api.service.ts中的请求URL，替换为产品评论的正确端点：

getProductReviews(pid: any) {
  const url = `${this.apiUrl}/ecom/wp-json/wc/v3/products/${pid}/reviews?consumer_key=${this.consumerKey}&consumer_secret=${this.consumerSecret}`;
  console.log(url);
  return this.http.get(url);
}

2. 初始化异步数据并处理空状态 #

组件中初始化productReviews为空数组，避免异步请求未返回时出现undefined：

// 可选：定义评论类型以规范数据结构
interface ProductReview {
  id: number;
  review: string;
  rating: number;
  // 按需添加其他字段
}

productReviews: ProductReview[] = [];
errorMessage: string = '';

getProductReviews() {
  this.apiService.getProductReviews(this.id).subscribe(
    (data: ProductReview[]) => {
      this.productReviews = data;
      console.log(this.productReviews);
    },
    (error) => {
      this.errorMessage = error.error.message;
      console.log(error.error.message, 'error');
    }
  );
}

3. 调整HTML模板匹配数据结构 #

WooCommerce API返回的产品评论是数组格式，需用*ngFor遍历渲染，同时添加加载/错误状态提示：

<div class="col-xs-4 col-sm-12 col-md-5 col-lg-5">
  <!-- 错误提示 -->
  <div *ngIf="errorMessage" class="text-danger">{{ errorMessage }}</div>
  <!-- 加载状态 -->
  <div *ngIf="productReviews.length === 0 && !errorMessage">加载评论中...</div>
  
  <!-- 遍历渲染评论与星级 -->
  <div *ngFor="let review of productReviews" class="review-item">
    <h4 [innerHTML]="review.review"></h4>
    <!-- 星级评分渲染 -->
    <div class="rating">
      <span *ngFor="let star of [1,2,3,4,5]" 
            class="star" 
            [class.filled]="star <= review.rating">
        ★
      </span>
    </div>
  </div>
</div>

额外说明 #

• 安全导航操作符：如果仍需处理单个评论场景，可使用productReviews?.review避免undefined报错，但需确保API返回单个评论对象。
• 权限验证：确保你的consumer_key和consumer_secret拥有读取产品评论的权限，否则会返回4xx权限错误。

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