ERRO: A propriedade 'cod' não existe no tipo '{}' - Next.js 14.0.3

[Cyber-Phantom]

Pessoal, não consigo acessar as variáveis: cli.cod, cli.nome, cli.email.

O VS Code acusa:

A propriedade 'cod' não existe no tipo '{}'

A propriedade 'nome' não existe no tipo '{}'.

A propriedade 'email' não existe no tipo '{}'.

Com a variável {codigo} está tudo ok.

                <li>Cód.: {codigo}</li>
                <li>Código: {cli.cod}</li>
                <li>Nome: {cli.nome}</li>
                <li>Email: {cli.email}</li>

Alguém saberia me dizer o que acontece e como resolver o problema?

Durante o desenvolvimento tudo funciona APESAR do erro. Ele permanece, mas funciona bem.

No build dá o mesmo erro.

Segue o código:

"use client"

import { useState } from "react"

const Integracao = () => {
    const [codigo, setCodigo] = useState(1)
    const [cli, setCli] = useState({})
    
    const obterCliente = async ()=> {
        try {
            const resp = await fetch(`http://localhost:3000/clientes/${codigo}`)
            const dados = await resp.json()
            setCli(dados)
        } catch (error) {
            console.error("Erro ao obter cliente:", error)
            setCli({}) // Limpar cliente em caso de erro
        }
    }

    return (
        <>
            <div>
                <input className='text-black' type='number' value={codigo} 
                    onChange={e => setCodigo(+e.target.value)}/>
                <button onClick={obterCliente}>Obter Cliente</button>
            </div>
            <ul>
                <li>Cód.: {codigo}</li>
                <li>Código: {cli.cod}</li>
                <li>Nome: {cli.nome}</li>
                <li>Email: {cli.email}</li>
            </ul>
        </>
    )
}

export default Integracao

O módulo da API é src/app/clientes/[cliente]/route.ts:

export async function GET(req: Request) {

    const url = new URL(req.url)
    const segmentos = url.pathname.split('/').filter(segment => segment !== '')
    const id = segmentos[segmentos.length - 1]

    return Response.json({
        cod: `${id}`,
        nome: `Maria ${id}`,
        email: `mariamaria${id}@xyz.com`
    }, { status: 200 })
}

Com o route.ts está tudo ok.

O problema é no primeiro módulo.

Também já tentei usar a notação [] para acessar, mas tbm não funcionou.

                <li>Cód.: {codigo}</li>
                <li>Código: {cli['cod']}</li>
                <li>Nome: {cli['nome']}</li>
                <li>Email: {cli['email']}</li>

Já pesquisei vários artigos no google e na documentação do NX, mas não encontrei nada que pudesse solucionar o problema.

Agradeço qq ajuda!!

[Cyber-Phantom]

PROBLEMA SOLUCIONADO. Segue abaixo:

O TypeScript está reclamando desses erros porque, por padrão, ele não conhece a estrutura exata do objeto cli e presume que seja um objeto vazio ({}), portanto, não reconhece as propriedades específicas como cod, nome e email.

Para resolver esse problema, você pode criar uma interface que represente a estrutura esperada do objeto cli e usar essa interface como o tipo do estado. Aqui está como você pode fazer isso:

// Defina uma interface para representar a estrutura do objeto do cliente
interface Cliente {
  cod: string;
  nome: string;
  email: string;
}

// ...

// No componente, use a interface como tipo para o estado

const [cli, setCli] = useState<Cliente>({ cod: '', nome: '', email: '' });

// ...

// No retorno do componente, utilize a interface para garantir que o TypeScript reconheça as propriedades

<li>Código: {cli?.cod ?? 'Código vazio!'}</li>
<li>Nome: {cli?.nome ?? 'Nome vazio!'}</li>
<li>Email: {cli?.email ?? 'Email vazio!'}</li>

Segue o código completo:

"use client"

import { useState } from "react"

interface Cliente {
    cod: string;
    nome: string;
    email: string;
}

const Integracao = () => {
    const [codigo, setCodigo] = useState(1)
    const [cli, setCli] = useState<Cliente>({ cod: '', nome: '', email: '' })

    const obterCliente = async () => {
        try {
            const resp = await fetch(`http://localhost:3000/clientes/${codigo}`)
            const dados = await resp.json()
            setCli(dados)
        } catch (error) {
            console.error("Erro ao obter cliente:", error)
            setCli({ cod: '', nome: '', email: '' }) // Limpar cliente em caso de erro
        }
    }

    return (
        <>
            <div>
                <input className='text-black' type='number' value={codigo}
                    onChange={e => setCodigo(+e.target.value)} />
                <button onClick={obterCliente}>Obter Cliente</button>
            </div>
            <ul>
                <li>Cód.: {codigo}</li>
                <li>Código: {cli?.cod ?? 'Código vazio!'}</li>
                <li>Nome: {cli?.nome ?? 'Nome vazio!'}</li>
                <li>Email: {cli?.email ?? 'Email vazio!'}</li>
            </ul>
        </>
    )
}

export default Integracao