Invalid invocation issue with async-await functionality in server component; specifically in dynamic route

Question

When I click on "add new", I get the following error:

PrismaClientKnownRequestError: Invalid prisma.billboard.findUnique() invocation:
Inconsistent column data: Malformed ObjectID: provided hex string representation must be exactly 12 bytes, instead got: "new", length 3.
at async BillboardPage (billboards/[billboardId]/page.tsx:14:23) digest: "1047868513"`

const BillboardPage = async ({
  params
}: {
  params: { billboardId: string }
}) => {
  console.log("Billboard ID:", params.billboardId);
  const billboard = await prismadb.billboard.findUnique({
    where: {
      id: params.billboardId
    }
  });

  return ( 
    <div className="flex-col">

      <div className="flex-1 space-y-4 p-8 pt-6">
        <BillboardForm initialData={billboard} />
      </div>
    </div>
  );
};

export default BillboardPage;

Route component:

export const BillboardClient = () => {
    const router = useRouter();
    const params = useParams();
   return (
        <>
        <div className="flex items-center justify-between">
          <Heading 
          title="Billboards (0)"
          description="Manage Billboards for your store"
          />
          <Button  onClick={() => router.push(`/${params.storeId}/billboards/new`)}>
            <Plus className="mr-w h-4 w-4"/>
            Add New
          </Button>
        </div>
        <Separator />
        </>
    )
}

How can I fix the error?

Answer 1

Most likely you have bad data in your database; possibly a row where ID equals new, if the error message can be trusted. The value can't be converted to an ObjectID and an error is thrown.

Search the database and delete or fix invalid ID values.