I'm getting the error TypeError: Cannot destructure property 'data' of '(intermediate value)' as it is undefined.

export const getServerSideProps: GetServerSideProps = async () => {
  // categories
  const { data: categories }: AxiosResponse<ICollectionResponse<ICategory[]>> =
    await fetchCategories();

  return {
    props: {
      categories: {
        items: categories.data,
      },
    },
  };
};

export interface ICategory {
id: number;
attributes: ICategoryAttribute;
}

export interface ICategoryAttribute {
Title: string;
Slug: string;
}

export interface IPagination {
page: number;
pageSize: number;
pageCount: number;
total: number;
}

export interface IResourceMeta {
pagination: IPagination;
}

export interface ICollectionResponse<T> {
data: T;
meta: IResourceMeta;
}

Fetching categories

import axios from "axios"
const api = axios.create({
    baseURL: process.env.API_BASE_URL,
    headers: {
        Authorization: `Bearer ${process.env.BACKEND_API_KEY}`,
    },
});
//categories
export const fetchCategories = async () => {api.get('/api/categories')};

CodePudding user response：

Try deconstruct the object once it's resolved

const response: AxiosResponse<ICollectionResponse<ICategory[]>> = await fetchCategories();

const {data: categories} = response

return the axio get

export const fetchCategories = () => {return api.get('/api/categories')};