NextJS 13.4调用Airtable API时出现TypeError问题求助

错误根源 #

• Airtable的eachPage是回调模式的异步方法，你的GET函数是async函数，但没等eachPage的异步操作完成，就直接执行到了函数末尾的无效return语句。
• 末尾return new NextResponse(JSON.stringify(obj), { status: 200 })里的obj根本没定义，这会让NextJS路由模块处理返回值时出错，触发Cannot read properties of undefined (reading 'headers')错误。
• 虽然eachPage的done回调里也有return NextResponse，但此时GET函数已经提前返回了无效值，NextJS无法识别这个回调里的响应。

修复方案 #

把Airtable的回调式调用转换成Promise形式，让async函数能正确等待异步操作完成后再返回响应：

修改后的/app/api/jobs/route.js代码：

import { NextResponse } from 'next/server';
import { jobs } from "../../../utils/Airtable";
 
export async function GET(req) {
  // req.headers.get是同步方法，无需await
  const headerId = req.headers.get('id');
  let recordsArr = [];

  try {
    // 将eachPage包装为Promise，让async函数能等待其完成
    await new Promise((resolve, reject) => {
      jobs.select({
        view: 'Grid view',
        fields: ['Project Lead'],
        // 修正原filterByFormula的语法错误
        filterByFormula: `AND({Project Lead} = 'Jane Doe', {Created Day} = '6/1/23')`
      }).eachPage(
        function page(records, fetchNextPage) {
          recordsArr.push(...records);
          try {
            fetchNextPage();
          } catch (err) {
            reject(err);
          }
        },
        function done(err) {
          if (err) {
            reject(err);
          } else {
            resolve();
          }
        }
      );
    });

    // 异步操作完成后，统一返回正确响应
    return new NextResponse(JSON.stringify(recordsArr), { status: 200 });
  } catch (err) {
    console.error(err);
    return new NextResponse(JSON.stringify({ message: 'Error' }), { status: 500 });
  }
}

额外修正细节 #

• 修正了原filterByFormula的语法错误：原写法AND({Created Day}, '6/1/23')不符合Airtable公式规则，改为{Created Day} = '6/1/23'才能正确过滤。
• 移除了原函数末尾无效的return语句，现在所有响应都在异步操作完成后统一返回。
• 去掉了req.headers.get('id')前多余的await，因为该方法是同步执行的。

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