调用getStrapiUrl触发TypeError: path.startsWith is not a function如何解决

报错原因 #

• 你传入getStrapiUrl函数的path参数不是字符串类型，是一个包含url属性的对象，对象本身没有startsWith方法，调用该方法自然会抛出类型错误。从你打印的调试日志可以明确看到，实际传入的path值为{ url: '/uploads/work_with_74e76d4826.png' }，和你预期的路径字符串格式不符。

修复方案 #

方案1：调整调用侧逻辑 #

调用工具函数时传入对象的url属性值，不要直接传入整个对象：

// 错误调用示例
getStrapiUrl(strapi返回的媒体资源对象)
// 修正后的调用
getStrapiUrl(strapi返回的媒体资源对象.url)

方案2：修改工具函数做入参兼容（更稳健） #

直接优化工具函数的逻辑，同时兼容字符串和Strapi默认返回的媒体对象格式，还能避免后续同类报错：

export const getStrapiUrl = (path: string | { url?: string } | null | undefined): string => {
  if (path == null) {
    return "";
  }
  // 兼容对象格式，优先取内部的url属性
  const targetPath = typeof path === "object" ? path.url ?? "" : path;
  if (typeof targetPath !== "string") {
    return "";
  }
  return `${
    targetPath.startsWith("/", 1) ? process.env.NEXT_PUBLIC_STRAPI_API_URL : ""
  }${targetPath}`;
};

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