uni-app Uncaught TypeError: Cannot read properties of null (reading 'bottom')

The error Uncaught TypeError: Cannot read properties of null (reading 'bottom') in a uni-app project typically occurs when your code is trying to access a property (in this case, bottom) of an object that is null. This usually happens when the object you’re trying to access hasn’t been properly initialized or doesn’t exist.

Here are some steps to debug and resolve this issue:

1. Identify the Source of the Error

• Check the stack trace in the browser’s developer console to identify the exact line of code where the error is occurring.
• Look for any code that is trying to access the bottom property of an object.

2. Check for Null or Undefined Objects

• Ensure that the object you’re trying to access is not null or undefined before accessing its properties.
• You can use optional chaining (?.) to safely access properties of potentially null or undefined objects.

const bottomValue = someObject?.bottom;

3. Verify Object Initialization

• Make sure that the object is properly initialized before you try to access its properties.
• If the object is supposed to be created by a function or API call, ensure that the function or API call has completed successfully.

4. Check for Asynchronous Code

• If the object is being populated asynchronously (e.g., via an API call), ensure that you’re not trying to access it before the asynchronous operation has completed.
• Use async/await or .then() to handle asynchronous operations properly.

async function fetchData() {
    const response = await someApiCall();
    const bottomValue = response.bottom;
}

5. Review Uni-App Specific Code

• If the error is related to a uni-app specific component or API (e.g., uni.createSelectorQuery()), ensure that the component or API is being used correctly.
• For example, if you’re using uni.createSelectorQuery(), make sure that the element you’re querying exists in the DOM.

uni.createSelectorQuery().select('.some-class').boundingClientRect(data => {
    if (data) {
        console.log(data.bottom);
    } else {
        console.error('Element not found');
    }
}).exec();

6. Add Defensive Programming

• Add checks to ensure that the object exists before accessing its properties.

if (someObject && someObject.bottom !== undefined) {
    const bottomValue = someObject.bottom;
} else {
    console.error('someObject is null or does not have a bottom property');
}

7. Test and Debug

• After making changes, test your application to ensure that the error is resolved.
• Use console logs or debugger statements to inspect the state of the object at runtime.

Example Scenario

Suppose you have the following code:

const element = document.querySelector('.some-element');
console.log(element.bottom);

If .some-element does not exist in the DOM, element will be null, and trying to access element.bottom will throw the error. To fix this:

const element = document.querySelector('.some-element');
if (element) {
    console.log(element.bottom);
} else {
    console.error('Element not found');
}