[Bug] Erro ao tentar implementar utilizando Typescript

Olá, Jhonatan, como vai?

Esse erro está acontecendo porque searchParams está undefined em algum momento, e o TypeScript reclama ao tentar acessar page. Uma forma de corrigir isso é configurar um valor padrão para searchParams ou para page, garantindo que o código funcione mesmo que searchParams venha como undefined. Experimente ajustar seu código assim:

export default function TableServicos({
  searchParams = {},
}: {
  searchParams?: { page?: string }
}) {
  const { page } = searchParams || {};
  console.log(page);
  return (
    <div>
      <h1>{page}</h1>
    </div>
  );
}

Dessa forma, searchParams assumirá um objeto vazio como padrão, evitando o erro de undefined.

Espero ter ajudado!

Siga firme nos seus estudos e conte com o fórum sempre que precisar!

Abraços :)

Olá, Mike. Agradeço seu retorno, fiz o ajuste conforme orientado, mas ainda assim a aplicação não está se comportando conforme o esperado, veja que o valore de page sempre vem com undefined, mesmo eu alterando o valor de page na URL. 

Oi, Jhonatan. Tudo bem?

Eu fiz uma mudança aqui seguindo os exemplos da aula, e funcionou corretamente.

.

Talvez tenha algum outro fator causando esse erro. Vou deixar o código da demonstração caso queira testar. Se você tiver o projeto em um repositório eu posso dar uma olhada melhor no que pode estar causando esse problema.

import { CardPost } from '@/components/CardPost';
import logger from '@/logger';
import styles from './page.module.css';
import Link from 'next/link';

async function getAllPost(page: number) {
    const response = await fetch(
        `http://localhost:3042/posts?_page=${page}&_per_page=6`
    );
    if (!response) {
        logger.error('Alguma coisa deu errado!');
        return [];
    }

    logger.info('Posts obtidos com sucesso!');
    return response.json();
}

// export default async function Home({ searchParams }: props) {
// 	const currentPage = Number(searchParams?.page) || 1;
// 	const { data: posts, prev, next } = await getAllPost(currentPage);

// 	return (
// 		<main className={styles.grid}>
// 			{posts.map((post: IPost) => (
// 				<CardPost key={post.id} post={post} />
// 			))}
// 			{prev && <Link href={`/?page=${prev}`}>Página anterior</Link>}
// 			{next && <Link href={`/?page=${next}`}>Próxima página</Link>}
// 		</main>
// 	);
// }

async function getServicos(page: number) {
    const response = await fetch(
        `http://localhost:3042/posts?_page=${page}&_per_page=3`
    );
    return response.json();
}

export default async function TableServicos({
    searchParams = {},
}: {
    searchParams?: { page?: string };
}) {
    const currentPage = Number(searchParams?.page) || 1;
    const { data: posts, prev, next } = await getServicos(currentPage);

    const { page } = searchParams || {};
    console.log(page);
    return (
        <div>
            <h1>{page}</h1>
            {prev && <Link href={`/?page=${prev}`}>Página anterior</Link>}
            {next && <Link href={`/?page=${next}`}>Próxima página</Link>}
        </div>
    );
}

// interface props {
// 	searchParams: Record<string, string | undefined>;
// }

Só precisa ajustar o link da sua API.

Fico no aguardo