Svelte中RSS数据导入及页面渲染问题求助

问题根源 #

你在+page.server.js的load函数里用了嵌套的props返回结构，这不符合SvelteKit的当前约定，导致页面组件没法正确拿到articles数据。

修复步骤 #

1. 修正+page.server.js的返回格式 #

把原来嵌套在props里的结构改成直接返回字段：

import { fetchRSSFeed } from './data.js';

export async function load() {
    const rssFeedUrl = 'your-actual-rss-url-here'; // 替换成你真实的RSS地址
    const articles = await fetchRSSFeed(rssFeedUrl);
    console.log(articles);

    // 直接返回数据字段，不需要嵌套props
    return {
        articles
    };
}

2. 页面组件接收数据 #

在+page.svelte里直接导出articles即可正常接收数据：

<script>
    export let articles = [];
    console.log("Articles loaded:", articles);
</script>

<div id="container">
    <div class="about">
        <p>thoughts available on substack</p>
    </div>
    <section>
        <h2>recent posts</h2>
        <hr />
        <div class="posts">
            {#each articles as { title, link }}
                <a href={link} target="_blank">
                    <div class="post">
                        <h3>{title}</h3>
                    </div>
                </a>
            {/each}
        </div>
    </section>
</div>

3. 优化容错处理（可选） #

为了避免RSS请求或解析失败导致页面出错，给data.js的函数加上错误处理：

import fetch from 'node-fetch';
import { parseStringPromise } from 'xml2js';

export async function fetchRSSFeed(url) {
    try {
        const response = await fetch(url);
        if (!response.ok) throw new Error(`请求失败：${response.status}`);
        const rssText = await response.text();
        const parsedResult = await parseStringPromise(rssText);
        // 可选链避免结构异常报错
        const items = parsedResult.rss?.channel?.[0]?.item || [];
        return items.map(item => ({
            title: item.title?.[0] || '无标题',
            link: item.link?.[0] || '#'
        }));
    } catch (error) {
        console.error('获取RSS失败：', error);
        return [];
    }
}

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