React JS中调用YouTube API返回undefined问题排查

我尝试从YouTube频道播放列表中获取已上传的视频，在React JS项目中调用YouTube API后，Chrome控制台打印响应结果时显示undefined。

初始代码 #

import React from 'react';
import './Home.css'
//Components
import Header from '../../Components/Header/Header';
import Footer from '../../Components/Footer/Footer';

const YouTube_Playlist_Items_API = process.env.REACT_APP_YouTube_PlayList_Item_API_URL;
const YouTube_Key = process.env.REACT_APP_YouTube_API_Key;
const YouTube_Playlist_ID = process.env.REACT_APP_YouTube_PlayList_Item_ID;
const YouTube_MaxResults = process.env.REACT_APP_YouTube_PlayList_Max_Results;

export async function getLatestYouTubePost(){
    const res = await fetch(`${YouTube_Playlist_Items_API}?part=snippet&maxResults=${YouTube_MaxResults}&playlistId=${YouTube_Playlist_ID}&key=${YouTube_Key}`);
    const data = await res.json();
    console.log('data', data);
    return {
        props:{
            data
        }
    }
}

const Home = ({data}) => {
        getServerSideProps();
    return (
        <>
            <Header/>
            <div className='homeBody'>
                <p>Hello</p>
            </div>
            <Footer />
        </>
    );
}

export default Home;

更新说明 #

我发现如果移除getLatestYouTubePost()的export修饰符，响应结果不再返回undefined。以下是更新后的代码：

import React, { useState, useEffect } from 'react';
import './Home.css'
//Components
import Header from '../../Components/Header/Header';
import Footer from '../../Components/Footer/Footer';
//Repositories
import { Navigate } from 'react-router-dom';

const YouTube_Playlist_Items_API = process.env.REACT_APP_YouTube_PlayList_Item_API_URL;
const YouTube_Key = process.env.REACT_APP_YouTube_API_KEY;
const YouTube_Playlist_ID = process.env.REACT_APP_YouTube_PlayList_Item_ID;
const YouTube_MaxResults = process.env.REACT_APP_YouTube_PlayList_Max_Results;

async function getLatestYouTubePost(){
    const res = await fetch(`${YouTube_Playlist_Items_API}?part=snippet&playlistId=${YouTube_Playlist_ID}&maxResults=${YouTube_MaxResults}&key=${YouTube_Key}`);
    const data = await res.json();
    return {
        props: {
          data
        }
    }
}

const Home = ({data}) => {
    console.log('data', data);
    return (
        <>
            <Header/>
            <div className='homeBody'>
                <p>Hello</p>
            </div>
            <Footer />
        </>
    );
}

export default Home;

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