无法将getStaticProps数据传递至NextPage组件问题排查

我通过getStaticProps能正常获取所需数据，但无法将其传递到BlogPrivate组件，其他文件采用完全相同的结构却可正常运行。组件内的articlesStrapi始终为undefined。

组件代码 #

import React, { useEffect, useState } from 'react';
import { GetStaticProps, NextPage } from 'next';
import { ArticleStrapi } from '../../@types/next';
import Article from './article';

type articlesStrapiProps = { articlesStrapi: ArticleStrapi[] };

const BlogPrivate: NextPage<articlesStrapiProps> = ({ articlesStrapi }) => {
    
console.log(articlesStrapi); // 输出undefined

    return (
        <div style={{ display: 'flex', flexDirection: 'row' }}>
            //////
        </div>
    );
};

export const getStaticProps: GetStaticProps<{ articlesFromStrapi: ArticleStrapi[] }> = async () => {
    const res = await fetch(`${process.env.NEXT_PUBLIC_BACKEND}api/articles`);
    const { data } = await res.json();
    const articlesFromStrapi: ArticleStrapi[] = data;

    return !articlesFromStrapi
        ? { notFound: true }
        : {
                props: { articlesFromStrapi },
                revalidate: 10 // In seconds
          };
};

export default BlogPrivate;

getStaticProps中articlesFromStrapi打印结果 #

[
  {
    id: 1,
    attributes: {
      title: 'Article 1dgdrgdr',
      createdAt: '2022-11-22T13:28:16.243Z',
      updatedAt: '2022-11-22T18:02:50.096Z',
      publishedAt: '2022-11-22T13:49:16.161Z',
      content: 'dfdsf sdf ds '
    }
  },
  {
    id: 6,
    attributes: {
      title: 'fdsfdsf',
      createdAt: '2022-11-22T18:01:47.759Z',
      updatedAt: '2022-11-22T18:01:48.440Z',
      publishedAt: '2022-11-22T18:01:48.438Z',
      content: 'dsf sdf dsf dsf dsf dsf dsf dsf '
    }
  }
]

接口定义 #

export interface ArticleStrapi {
    id: string;
    attributes: Article;
}

export interface Article {
    title: string;
    content: string;
    createdAt: string;
    publishedAt: string;
    updatedAt: string;
}

问题原因与修复 #

核心问题：props键名不匹配 #

getStaticProps返回的props键是articlesFromStrapi，但组件BlogPrivate接收的props键是articlesStrapi，两者名称不一致导致组件无法拿到数据。

修复方案（二选一） #

1. 修改组件的props接收名，与getStaticProps返回的键名对齐：

// 修改props类型定义
type articlesStrapiProps = { articlesFromStrapi: ArticleStrapi[] };

// 组件接收对应键名的props
const BlogPrivate: NextPage<articlesStrapiProps> = ({ articlesFromStrapi }) => {
    console.log(articlesFromStrapi); // 现在能正常获取数据
    // ... 其他代码
};

2. 修改getStaticProps返回的props键名，与组件接收的键名对齐：

// 修改getStaticProps的泛型类型
export const getStaticProps: GetStaticProps<{ articlesStrapi: ArticleStrapi[] }> = async () => {
    const res = await fetch(`${process.env.NEXT_PUBLIC_BACKEND}api/articles`);
    const { data } = await res.json();
    // 同步修改变量名
    const articlesStrapi: ArticleStrapi[] = data;

    return !articlesStrapi
        ? { notFound: true }
        : {
                props: { articlesStrapi },
                revalidate: 10
          };
};

额外类型提示 #

接口中ArticleStrapi的id定义为string，但返回数据中id是数字类型，可能会触发类型警告，建议修改接口匹配实际数据：

export interface ArticleStrapi {
    id: number; // 或改为 string | number 兼容两种类型
    attributes: Article;
}

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