Shopify模板webhookHandlers初始化类型错误求助

问题概述 #

刚创建Shopify官方应用模板且未修改任何代码，就触发了TypeScript类型检查错误：CUSTOMERS_DATA_REQUEST的deliveryMethod类型无法赋值为DeliveryMethod.Http，导致WebhookHandlersParam类型不兼容。

错误详情 #

Type '{ CUSTOMERS_DATA_REQUEST: { deliveryMethod: DeliveryMethod; callbackUrl: string; callback: (topic: any, shop: any, body: any, webhookId: any) => Promise<void>; }; CUSTOMERS_REDACT: { ...; }; SHOP_REDACT: { ...; }; }' is not assignable to type 'WebhookHandlersParam'.
  Property 'CUSTOMERS_DATA_REQUEST' is incompatible with index signature.
    Type '{ deliveryMethod: DeliveryMethod; callbackUrl: string; callback: (topic: any, shop: any, body: any, webhookId: any) => Promise<void>; }' is not assignable to type 'WebhookHandler | WebhookHandler[]'.
      Type '{ deliveryMethod: DeliveryMethod; callbackUrl: string; callback: (topic: any, shop: any, body: any, webhookId: any) => Promise<void>; }' is not assignable to type 'HttpWebhookHandler'.
        Types of property 'deliveryMethod' are incompatible.
          Type 'DeliveryMethod' is not assignable to type 'DeliveryMethod.Http'.

相关代码（index.js） #

// @ts-check
import { join } from "path";
import { readFileSync } from "fs";
import express from "express";
import serveStatic from "serve-static";

import shopify from "./shopify.js";
import productCreator from "./product-creator.js";
import GDPRWebhookHandlers from "./gdpr.js";

const PORT = parseInt(process.env.BACKEND_PORT || process.env.PORT, 10);

const STATIC_PATH =
  process.env.NODE_ENV === "production"
    ? `${process.cwd()}/frontend/dist`
    : `${process.cwd()}/frontend/`;

const app = express();

// Set up Shopify authentication and webhook handling
app.get(shopify.config.auth.path, shopify.auth.begin());
app.get(
  shopify.config.auth.callbackPath,
  shopify.auth.callback(),
  shopify.redirectToShopifyOrAppRoot()
);
app.post(
  shopify.config.webhooks.path,
  shopify.processWebhooks({ webhookHandlers: GDPRWebhookHandlers })
);

// All endpoints after this point will require an active session
app.use("/api/*", shopify.validateAuthenticatedSession());

app.use(express.json());

app.get("/api/products/count", async (_req, res) => {
  const countData = await shopify.api.rest.Product.count({
    session: res.locals.shopify.session,
  });
  res.status(200).send(countData);
});

app.get("/api/products/create", async (_req, res) => {
  let status = 200;
  let error = null;

  try {
    await productCreator(res.locals.shopify.session);
  } catch (e) {
    console.log(`Failed to process products/create: ${e.message}`);
    status = 500;
    error = e.message;
  }
  res.status(status).send({ success: status === 200, error });
});

app.use(serveStatic(STATIC_PATH, { index: false }));

app.use("/*", shopify.ensureInstalledOnShop(), async (_req, res, _next) => {
  return res
    .status(200)
    .set("Content-Type", "text/html")
    .send(readFileSync(join(STATIC_PATH, "index.html")));
});

app.listen(PORT);

解决方案 #

问题根源在gdpr.js文件中的Webhook配置——deliveryMethod使用了泛型的DeliveryMethod枚举，而TypeScript要求Http类型的Webhook必须明确指定DeliveryMethod.Http。

1. 打开项目中的gdpr.js文件，找到GDPRWebhookHandlers对象
2. 将每个Webhook配置里的deliveryMethod: DeliveryMethod修改为deliveryMethod: DeliveryMethod.Http
3. 同时建议修正callback函数的参数类型，避免使用any，让TypeScript能正确校验：

// 示例gdpr.js修改后的代码片段
import { DeliveryMethod } from "@shopify/shopify-api";

export default {
  CUSTOMERS_DATA_REQUEST: {
    deliveryMethod: DeliveryMethod.Http,
    callbackUrl: "/api/webhooks",
    callback: async (topic: string, shop: string, body: object, webhookId: string) => {
      // 处理逻辑
    },
  },
  // 其他Webhook配置同理修改
};

修改后，TypeScript类型检查会通过，因为明确指定了deliveryMethod为Http类型，符合HttpWebhookHandler的类型要求。

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