Next.js 13集成Elasticsearch读取索引报错，如何返回目标文档？

问题根源 #

1. Elasticsearch 客户端参数结构不匹配：若使用 @elastic/elasticsearch v8+ 版本，search 方法的查询参数无需嵌套在 body 字段中，旧写法会导致请求异常，返回的响应结构不符合预期，触发 Cannot read properties of undefined (reading 'hits') 错误。
2. 错误响应状态码无效：NextResponse.error() 在 Next.js 13 中会返回状态码 0，导致 RangeError [ERR_HTTP_INVALID_STATUS_CODE]。

修复步骤 #

1. 修正 API 路由代码 #

import { Client } from "@elastic/elasticsearch";
import { NextResponse } from "next/server";

export async function GET(request) {
  let client;
  try {
    // 初始化客户端，捕获连接错误
    client = new Client({ node: "http://localhost:9200" });

    // v8+ 版本：直接传递 query 参数，无需嵌套在 body 中
    const response = await client.search({
      index: "game-of-thrones",
      size: 100,
      query: {
        match_all: {}
      }
    });

    // 兼容不同版本的响应结构，增加空值判断
    const body = response.body || response;
    const hits = body.hits?.hits || [];
    // 带上 _id 字段，供客户端作为唯一 key 使用
    const documents = hits.map((hit) => ({
      ...hit._source,
      _id: hit._id
    }));

    return NextResponse.json(documents, { status: 200 });
  } catch (error) {
    console.error("Elasticsearch Error:", error);
    // 显式返回 500 错误状态码和提示信息
    return NextResponse.json(
      { error: "从 Elasticsearch 获取数据失败" },
      { status: 500 }
    );
  } finally {
    // 关闭客户端连接，避免资源泄漏
    if (client) {
      await client.close();
    }
  }
}

若使用 @elastic/elasticsearch v7 及以下版本，需将查询参数改回嵌套写法：

const response = await client.search({
  index: "game-of-thrones",
  size: 100,
  body: {
    query: {
      match_all: {}
    }
  }
});

2. 优化客户端页面逻辑 #

增加响应状态校验和错误提示，避免非成功状态下解析 JSON 出错：

'use client';
import { useEffect, useState } from 'react';

export default function Home() {
  const [documents, setDocuments] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('/api/all');
        // 先校验响应状态是否正常
        if (!response.ok) {
          throw new Error(`请求失败，状态码：${response.status}`);
        }
        const data = await response.json();
        setDocuments(data);
        setError(null);
      } catch (error) {
        console.error('获取数据失败:', error);
        setError(error.message);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  return (
    <main>
      {loading ? (
        <p>加载中...</p>
      ) : error ? (
        <p>错误：{error}</p>
      ) : (
        <div>
          {documents.map((document) => (
            <div key={document._id}>
              <h2>{document.character}</h2>
              <p>{document.quote}</p>
            </div>
          ))}
        </div>
      )}
    </main>
  );
}

额外排查要点 #

• 确认 Elasticsearch 服务在 http://localhost:9200 正常运行，可通过浏览器访问验证。
• 执行 npm list @elastic/elasticsearch 确认客户端版本，匹配对应的参数写法。
• 通过 curl http://localhost:9200/game-of-thrones 验证 game-of-thrones 索引是否存在。

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