Why am I getting an 'undefined' error but the code is working in my Meteor template?

I made this UI.registerHelper:

UI.registerHelper('addressCityName', function(id) {
    "use strict";
        return Cities.findOne({_id: id }).name
}) 

This allows me to access the name property of the linked city id in my Addresses collection.

It works in the browser, but in the console I get an error that says: Exception in template helper: TypeError: Cannot read property 'name' of undefined.

If I remove the name property from the UI.registerHelper return value, the error goes away but the browser no longer shows the city name.

What is up with this and how can I fix it?

When you try to get the name using Cities.findOne({_id: id }).name. But your subscription was not ready on client side. So the output of Cities.findOne({_id: id }) is undefined.

So if your try to get Cities.findOne({_id: id }).name so if you visualize your output will be like undefined.name. So this is the reason you are getting the error.

To solving the issue you can add a if condition and it will solve the issue.

UI.registerHelper('addressCityName', function(id) {
    "use strict";
        if(Cities.findOne({_id: id })) {
            return Cities.findOne({_id: id }).name
        }
})