无法读取未定义的属性段

我正在使用next.js和wordpress。我已经设置了api.js。每当我尝试[slug]从另一个组件访问时，都会显示- Typerror: Cannot read property 'slug' of undefined。

假设，Test如果我尝试通过具有下一个链接的组件访问帖子，则还有一个名为的页面。

<Link href={`/articles/${node.slug}`}>
    <a><h5>{post.name}</h5></a>
</Link>

它显示了 Typerror: Cannot read property 'slug' of undefined

我的代码可以在创建该组件的相同组件中正常工作，但是每当我尝试使用下一个链接从另一个组件访问它时，我的代码都会正常工作。它显示错误。

我希望它是很好的理解。

这是我的代码：

api.js：

const API_URL = process.env.WP_API_URL;

async function fetchAPI(query, { variables } = {}) {
  const headers = { 'Content-Type': 'application/json' };

  const res = await fetch(API_URL, {
    method: 'POST',
    headers,
    body: JSON.stringify({ query, variables })
  });

  // error handling work
  const json = await res.json();
  if (json.errors) {
    console.log(json.errors);
    console.log('error details', query, variables);
    throw new Error('Failed to fetch API');
  }
  return json.data;
}

export async function getAllPosts(preview) {
    const data = await fetchAPI(
      `
      query AllPosts {
        posts(first: 20, where: {orderby: {field: DATE, order: DESC}}) {
          edges {
            node {
              id
              date
              title
              slug
            }
          }
        }
      }
      `
    );
  
    return data?.posts;
}

export async function getAllPostsWithSlug() {
    const data = await fetchAPI(
      `
      {
        posts(first: 10000) {
          edges {
            node {
              slug
            }
          }
        }
      }
    `);
    return data?.posts;
};

export async function getPost(slug) {
    const data = await fetchAPI(
      `
      fragment PostFields on Post {
        title
        excerpt
        slug
        date
        featuredImage {
          node {
            sourceUrl
          }
        }
      }
      query PostBySlug($id: ID!, $idType: PostIdType!) {
        post(id: $id, idType: $idType) {
          ...PostFields
          content
        }
      }
    `,
      {
        variables: {
          id: slug,
          idType: 'SLUG'
        }
      }
    );
  
    return data;
};

[slug] .js：

<article>
   <h1>{postData.title}</h1>
       <div dangerouslySetInnerHTML={{ __html: postData.content }} />
</article>

export async function getStaticPaths() {
    const allPosts = await getAllPostsWithSlug();

    return {
        paths: allPosts.edges.map(({ node }) => `/articles/${node.slug}`) || [],
        fallback: true
    };
}

export async function getStaticProps({ params }) {
    const data = await getPost(params.slug);

    return {
        props: {
            postData: data.post
        }
    };
}

GraphQL查询

query AllProfiles {
  businessProfiles(where: {orderby: {field: AUTHOR, order: ASC}}) {
    edges {
      node {
        date
        title
        slug
        link
        uri
   }
}

注意：由于stackoverflow验证，我缩短了代码。现在，问题出在每当我尝试从另一个组件访问路径时，它都会显示我上面提到的错误。

我正在使用Next链接进行路由和所有操作。

反正要解决吗？请指导我。

谢谢你们。