使用Svelte调用Appwrite异步函数时出现500内部服务器错误

问题根源 #

• Svelte模板中直接使用await会触发SSR（服务器端渲染）错误，导致500内部服务器异常，组件模板不支持顶层await写法。
• appwrite.ts存在Promise语法错误：then的错误回调用逗号分隔而非链式catch，且非浏览器环境下函数无返回值，引发未定义问题。
• 默认图URL中项目名拼写错误：PCDatabse应为PCDatabase。
• 未处理response.files为空的情况，直接访问response.files[0]会抛出数组越界异常。

修复方案 #

1. 修正Svelte组件的异步逻辑处理 #

在组件脚本内处理异步请求，或使用Svelte原生的{#await}块，避免模板中直接用await：

+page.svelte

<script lang="ts" type="module">
  import { getImageURL } from '../../../appwrite';
  import { browser } from '$app/environment';

  let imgUrl: string | undefined;

  // 组件挂载后加载图片URL
  async function loadImage() {
    if (browser) {
      imgUrl = await getImageURL(brand, name);
    }
  }

  loadImage();
</script>

{#if imgUrl}
  <img src={imgUrl} alt="Product image">
{:else}
  <img src="/path/to/loading-or-default.png" alt="Placeholder">
{/if}

或用{#await}块简化写法：

<script lang="ts" type="module">
  import { getImageURL } from '../../../appwrite';
  import { browser } from '$app/environment';

  const imgPromise = browser ? getImageURL(brand, name) : Promise.resolve('/path/to/default.png');
</script>

{#await imgPromise then url}
  <img src={url} alt="Product image">
{:catch}
  <img src="/path/to/default.png" alt="Default image">
{/await}

2. 修复appwrite.ts的Promise逻辑与错误处理 #

修正语法错误，添加空值判断，统一错误返回逻辑：

appwrite.ts

import { storage, Query } from 'appwrite';
import { browser } from '$app/environment';

const endpoint = '你的Appwrite端点地址'; // 替换为实际端点

export async function getImageURL(brand: string, name: string) {
  // 非浏览器环境直接返回默认图
  if (!browser) {
    return `${endpoint}/storage/buckets/Images/files/6482e96a92473bfc9b5b/view?project=PCDatabase`;
  }

  try {
    const response = await storage.listFiles('Images', [
      Query.equal('name', `${brand} ${name}.png`)
    ]);

    // 判断是否找到目标文件
    if (response.files.length > 0) {
      return `${endpoint}/storage/buckets/Images/files/${response.files[0].$id}/view?project=PCDatabase`;
    }
    // 未找到文件返回默认图
    return `${endpoint}/storage/buckets/Images/files/6482e96a92473bfc9b5b/view?project=PCDatabase`;
  } catch (error) {
    console.error('获取图片URL失败:', error);
    // 异常时返回默认图
    return `${endpoint}/storage/buckets/Images/files/6482e96a92473bfc9b5b/view?project=PCDatabase`;
  }
}

核心修复点 #

• 移除模板中的直接await调用，改用脚本内异步逻辑或{#await}块，解决SSR导致的500错误。
• 用try/catch替代错误的Promise回调写法，逻辑更清晰且避免语法错误。
• 添加response.files空值判断，防止数组越界异常。
• 修正项目名拼写错误，确保默认图URL可正常访问。
• 处理非浏览器环境（SSR）的情况，保证函数始终有返回值。

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