getStaticProps无法拉取接口数据但Postman请求正常该如何解决

• 1 先确认getStaticProps的适用场景 #

getStaticProps 只能在Next.js Page Router 下 pages 目录内的页面级组件中使用，不支持普通公共组件、App Router 组件，如果你的 NewsGridThree 是放在 components 目录下的公共组件，写在组件内的 getStaticProps 根本不会执行，自然没有日志输出、传入的参数为 undefined。
如果是这种情况，两个解决方案：

• 把新闻拉取逻辑移到引用该组件的父页面的 getStaticProps 中，拿到数据后通过 props 传递给 NewsGridThree 组件
• 改用客户端请求方式拉取数据

• 2 确认日志输出位置 #

getStaticProps 是服务端运行的逻辑，所有 console.log 只会输出在启动 Next.js 服务的终端/命令行窗口中，不会出现在浏览器开发者工具的控制台，不要混淆日志位置。

• 3 补充错误捕获逻辑 #

原代码没有异常捕获，请求出错时无法感知具体报错信息，替换getStaticProps逻辑为以下代码，可打印具体错误原因：

export const getStaticProps = async () => {
  try {
    // 打印拼接后的请求地址，确认和Postman使用的地址完全一致
    const requestUrl = `${env.baseURL}${siteName.NewsThree}`
    console.log('请求地址：', requestUrl)
    // 对齐Postman的请求头，部分接口会校验Accept、User-Agent甚至鉴权头
    const res = await fetch(requestUrl, {
      headers: {
        'Accept': 'application/json'
        // 若Postman请求带了Authorization等自定义头，在这里补充
      }
    })
    console.log('响应状态：', res.status, res.statusText)
    // 先判断响应是否正常
    if (!res.ok) throw new Error(`接口响应异常，状态码${res.status}`)
    const newsthreeData = await res.json()
    console.log('接口返回数据：', newsthreeData)
    return {
      props: {
        newsthreeData
      },
      // 按需配置增量静态再生，单位秒
      revalidate: 60
    }
  } catch (err) {
    console.error('拉取新闻失败：', err)
    return {
      props: {
        newsthreeData: null
      }
    }
  }
}

• 4 客户端请求参考实现 #

如果你需要直接在组件内拉取数据，可以改用客户端请求的写法：

import { useEffect, useState } from 'react'
import { siteName, env } from "../../../../comps/env";

export default function NewsGridThree() {
  const [newsthreeData, setNewsThreeData] = useState(null)
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    const fetchNews = async () => {
      try {
        const res = await fetch(`${env.baseURL}${siteName.NewsThree}`)
        if (!res.ok) throw new Error('请求失败')
        const data = await res.json()
        setNewsThreeData(data)
      } catch (err) {
        console.error('拉取新闻出错：', err)
      } finally {
        setLoading(false)
      }
    }
    fetchNews()
  }, [])

  const newTitle = "Nyheder";
  if (loading) return <div>加载中...</div>
  
  return (
      <div className="mobil:mb-6">
          <h2 className="text-2xl font-extrabold uppercase text-center text-blue-500 mt-2 mb-10">{newTitle}</h2>
          <div className="grid md:grid-cols-12 gap-2 px-5">
              {/* 渲染新闻列表 */}
              {newsthreeData?.data?.map(news => (
                <div key={news.id}>
                  <h3>{news.title}</h3>
                  <p>{news.deck}</p>
                </div>
              ))}
          </div>
      </div>
  )
}

• 5 额外排查点 #

如果是Next.js 13+ App Router 项目，不存在getStaticProps，直接在服务端组件中编写请求逻辑即可，无需特殊生命周期函数。 #

内容的提问来源于stack exchange，提问作者J. Petersen