If you're building a screen-based app using a low-code or no-code platform and see the error:

INVALID_NAVIGATE_ACTION_PAYLOAD

Type of field in navigate action payload do not match that in next screen’s data model

You're not alone. This is a common issue that usually comes down to a simple type mismatch. This error happens when the type of data passed during navigation doesn't match the expected type in the next screen's model. It’s an easy fix—just make sure your payload matches the schema exactly. Let’s walk through what this error means, why it happens, and how you can fix it.

What the Error Means

This error is triggered when the data you're passing from one screen to another doesn’t match the data type expected on the target screen.

Think of it like this: you're sending a number, but the next screen is expecting a string—or vice versa.

A Simple Example

Here’s a scenario that causes this error:

First screen (navigation payload):

"on-click-action": {
  "name": "navigate",
  "next": {
    "type": "screen",
    "name": "SECOND_SCREEN"
  },
  "payload": {
    "name": 123
  }
}

Second screen (data model):

"data": {
  "name": { "type": "string" }
}

In this case, you're passing the number 123 for the field name, but the second screen is expecting that field to be a string.

How to Fix It

The solution is to make sure the value you send matches the type defined in the target screen's data model.

Corrected payload:

"payload": {
  "name": "123"
}

Now you're sending a string ("123"), which aligns with the expected data model.

Tips for Avoiding This Error

Here are a few practical tips to prevent this issue from happening again:

  • Ensure the types match exactly:

    • Use quotes for strings.

    • Avoid quotes for numbers and booleans.

  • Be cautious with booleans and nulls—platforms often treat these types strictly.

  • Keep data types consistent across screens and actions.

For more troubleshooting tips related to WhatsApp Business API, check out heltar.com/blogs.